首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在flutter中使用video_player插件时,如何显示当前视频的播放时间?

在Flutter中使用video_player插件时,可以通过video_player_controller来获取当前视频的播放时间。以下是实现的步骤:

  1. 首先,确保已经在pubspec.yaml文件中添加了video_player插件的依赖。
  2. 在需要显示视频播放时间的页面中,导入video_player插件的库文件:
代码语言:txt
复制
import 'package:video_player/video_player.dart';
  1. 创建一个VideoPlayerController对象,并初始化视频文件路径:
代码语言:txt
复制
VideoPlayerController _controller;

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.asset('assets/video.mp4')
    ..initialize().then((_) {
      setState(() {});
    });
}

这里假设视频文件位于assets文件夹下,文件名为video.mp4。你可以根据实际情况修改视频文件的路径。

  1. 在视频播放器部分的Widget中,使用VideoPlayer组件来展示视频:
代码语言:txt
复制
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Video Player'),
    ),
    body: Center(
      child: _controller.value.initialized
          ? AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            )
          : CircularProgressIndicator(),
    ),
  );
}

这里使用了一个AspectRatio组件来保持视频的宽高比,并将VideoPlayerController传递给VideoPlayer组件进行播放。

  1. 最后,在需要显示当前视频播放时间的位置,可以使用VideoPlayerValue对象中的position属性来获取当前播放时间。可以通过一个Text组件来展示该时间:
代码语言:txt
复制
Text(
  '${_controller.value.position.inMinutes}:${(_controller.value.position.inSeconds % 60).toString().padLeft(2, '0')}',
  style: TextStyle(fontSize: 20),
)

这里使用了字符串插值来展示当前播放时间,将分钟和秒数分别显示,并使用padLeft方法来保证秒数始终为两位数。

通过以上步骤,你可以在Flutter中使用video_player插件来显示当前视频的播放时间。请注意,这只是一个简单的示例,你可以根据实际需求进行更复杂的UI设计和交互。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 音视频播放器的实现思路及设计理念

为什么是音视频播放器    随着Flutter在越来越多大厂的业务落地,大家不难发现,音视频是一块绕不开的业务。...短视频、IM、新媒体等相对较重的业务中都会有音视频的身影 ,那么如何通过一个强大的跨平台框架去实现一个强大 、高性能、可控的音视频播放功能呢?我们是否还仅仅停留在使用插件的上层API ?...请大家思考这样一个业务场景:   比如我们想调用摄像头 来拍照或录视频,但在拍照和录视频的过程中我们需要将预览画面显示到我们的Flutter UI中,如果我们要用Flutter定义的消息通道机制来实现这个功能...是Flutter官方plugin中的音视频播放插件,我们不妨以这个插件为例,细看其中的一些端倪。...其实是为了我们的多窗口播放功能,也就是在插件的example展示的一个界面中多个播放画面的效果,其实这一类的设计还可以应用在视频通话实现中的多窗口会话 ,说白了就是可以在Flutter中对应多个不同的

3.2K40
  • Flutter 实现视频全屏播放逻辑及解析

    一、前言 相信做过移动端视频开发的同学应该了解,想要实现视频从普通播放到全屏播放的逻辑并不是很简单,比如在 GSYVideoPlayer 中的动态全屏切换效果,就使用了创建全新的 Surface 来替换实现...image 如下代码所示,首先在正常播放页面下加入官方 video_player 插件的 VideoPlayer 控件,并且初始化 VideoPlayerController 用于加载需要播放的视频并初始化...三、实现逻辑 之所以可以如此简单地实现动态化全屏效果,其实主要涉及到 video_player 插件在 Flutter 上的实现:外接纹理 Texture 。...所以 Flutter 中控件的渲染堆栈是独立的,没办法和原生平台直接混合使用,这时候为了能够在 Flutter 中插入原生平台的部分功能,Flutter 除了提供了 PlatformView 这样的实现逻辑之外...image 举个例子,在 Android 原生层中 video_player 使用的是 exoplayer 播放内核,那么如上图所示,VideoPlayerController 会在初始化的时候通过 MethodChannel

    3.3K10

    【译】Flutter beta 2 Now

    VS Code获得了对运行测试,多项目支持和一个新选择器的支持,以在安装多个时选择当前的Flutter SDK。 改进的资源系统 我们已经对我们的资产系统进行了相当重要的优化。...让我们来看一个具体的例子,video_player我们几个月前推出的插件。 到目前为止,它只能播放来自网络的视频,但一些开发人员要求能够使用Flutter的资产系统“传递”已经嵌入到应用中的视频文件。...使用测试版2和版本0.4.0的插件,现在可以实现了。 因为我们将资源作为基础平台所期望的,因此可以在Flutter和本地平台之间共享。...在Flutter beta 1中,启动时不会出现错误,只有当用户点击该按钮后,才会通知字符串不能用作小部件: 通过Dart 2中新的完整运行时检查,我们可以避免像这样的“等待发生的错误”,而不是提前失败...然后,请参阅我们突破性变更后的全面指导,了解如何解决使用Dart 2中新的,更全面的运行时类型检查可能会遇到的问题。 如果您需要多一点时间才能完成此操作,则可以使用Dart 2退出暂时切换回旧的行为。

    2.3K30

    Flutter 中 视频封面 视频的压缩 上传 播放

    video_player : 是 Flutter 中用于播放视频的重要库。...它提供了一套完整的 API 来处理视频播放相关的功能,支持多种视频格式,能够在 Android 和 iOS 平台上实现流畅的视频播放体验 ideo_compress : 是一个在 Flutter 应用中用于视频压缩的库...它帮助开发者方便地减小视频文件的大小,同时在一定程度上保持视频的质量,这在应用开发中对于优化存储、减少网络传输带宽等场景非常有用 1....首先订阅视频压缩进度,在每次进度更新时,将进度赋值给_progress变量,并且如果onProgress回调函数不为空,则将进度传递给外部。...获取视频的宽高比,VideoPlayer(_controller)则用于显示视频。

    11710

    Flutter单引擎和外接纹理内存优化探索之路

    而且,出现flutter通过调用原生jsbridge在开一个flutter也是有可能的发生的,当出现这样一种情况时,很明显,flutter会有多个实例,那么我们的flutter引擎的内存占用是否会有多份呢...所以PlatformView不适合用于列表,仅仅适合用户页面呈现单一控件的情景,比如地图,比如单个的视频播放器,有很多引用列表展示视频,使用PlatformView实现的那些视频播放插件很显然不适合,我们可以发现...,flutter团队视频播放器https://pub.dev/packages/video_player的实现就不是platfomView,是使用的外接纹理。...继续在Google汪洋大海中寻找,发现讲原理倒是一堆一堆的,真正比较关键的地方缺没给出,直到我发现了这篇文章提到了如何去使用flutter的外接纹理,但是其实对于我来说,离贴bitmap有一定的距离,虽然只是贴了一个背景色而已...: 使用外接纹理的方式: image.png 使用flutter原生的Image image.png 目前,插件仅仅实现了Android版本,已经开源了,目前支持webp,gif解析。

    5.6K71

    :记一次SQLite的使用

    ,不然感觉很生硬 以前的SQLite介绍文章有点无病呻吟的感觉,这次来实际用一下,相信感触会更深 1.解决视频播放量的记录问题 2.解决视频进入时恢复到上次播放进度 3.解决查询最近播放的n条记录的问题...) 唯一 非空 current_pos 当前播放进度 TINYINT 默认为0 last_play_time 上次播放时间 CHAR(24) 2019-3-1 16:20:...1.关于插入 视屏播放器功能由VideoView实现,我上面封了一层VideoPlayerManager用来管理 在每次设置播放资源时插入数据,上面的插入方法在已经有值时,播放次数会 + 1...|--- 在每次设置播放资源时插入 ------------------------------- VideoBean videoBean = new VideoBean(); videoBean.setPath...---- 2.播放进度的记录 核心在于暂停时保存进度,在恰当的时机进行 seekTo 和界面数据回显及渲染 使用MVP来解耦很方便,Presenter中获取数据库进度,顺便seekTo, 再将进度数据设置给

    46410

    Flutter 2.8 的新特性【flutter专题17】

    例如在 Android 上渲染第一帧之前,Flutter 现在 只通知 Dart VM TRIM_LEVEL_RUNNING_CRITICAL 及以上的内存压力信号,在本地测试中,这个更改将低端设备上的第一帧时间减少了多达..., Flutter 开发人员在进行性能跟踪时遇到了问题。...Flutter Web 使用 HtmlElementView Widget 实现了这一点,它允许开发者在 Flutter Web 应用程序中托管 HTML 元素。...如果开发者使用的是 google_maps_flutter 插件或 video_player 插件的 web 版本,或者你已经遵循了 Flutter 团队关于如何优化网络上显示图像的建议,那么您其实已经在使用...所以该版本会复用早期平台视图创建的画布,这意味着开发者可以在 HtmlElementView 的 Web 应用中拥有多个实例而不会降低性能,同时还可以减少使用平台视图时的滚动卡顿。

    2.4K10

    我用flutter做了一个维基How中文版

    可以扫码这个二维码体验 目前支持的功能有: 支持显示推荐列表 支持搜索,但是只能搜索到英文的,因为api不支持搜索到中文的 查看详情 详情里面播放视频的功能 显示html文本 支持收藏 支持从收藏移除...image.png image.png image.png image.png image.png d 实现的过程 这个App大概只画了一天半的时间就搞定啦,可怜的我浪费了自己的周末...widget这里是我封装的一些自定义组件,里面包括,在列表里面播放视频的控件等 所以,需要那些库呢,这里我贴一下 pull_to_refresh: ^1.5.8 flutter_bloc: ^...flutter_html 因为详情也有些地方的内容是html,因此需要使用一个展示html的控件。...neeko&chewie&video_player 是视频所需的控件,不过我最后没使用neeko,还是用的chewie。

    2.2K342

    【老孟Flutter】Flutter 2 新增的功能

    此外,我们在flutter.dev上创建了一个新的Ads页面,您可以在其中找到所有有用的资源,例如插件实施指南,内嵌横幅和原生广告代码实验室,以及重叠横幅,非页内广告和奖励视频广告代码实验室。...,以及能够在SnackBars完成时显示SnackBars的能力。...Flutter修复 每当任何框架成熟并使用越来越多的代码库聚集用户时,随着时间的推移,趋势就是避免对框架API进行任何更改,以避免破坏越来越多的代码行。...现在,当您显示分辨率明显大于其显示尺寸的图像时,该图像将上下颠倒显示,以便在您的应用中轻松查找。...例如,在摄像机和video_player插件之间,已合并了将近30个PR,以大大提高两者的质量。如果您以前在使用这两种方法时遇到麻烦,则应该再看一遍;我们认为您会发现它们更加强大。

    7.9K20

    FFmpeg开发笔记(五十二)移动端的国产视频播放器GSYVideoPlayer

    尽管小水母版本的新建App工程采用Kotlin编码,不过GSYVideoPlayer支持Java编码,所以仍然可以在Java代码中调用GSYVideoPlayer。...三、在App代码中使用播放器GSYVideoPlayer提供了三种播放器控件,分别是NormalGSYVideoPlayer、GSYADVideoPlayer和ListGSYVideoPlayer,它们在...App代码中的用法分别说明如下:1、普通播放器NormalGSYVideoPlayerNormalGSYVideoPlayer用来播放单个视频文件,在XML文件中放置该控件的代码如下所示:2、广告播放器GSYADVideoPlayerGSYADVideoPlayer用来播放视频文件的片头广告,注意该控件要和NormalGSYVideoPlayer搭配使用。...ListGSYVideoPlayerListGSYVideoPlayer用来播放在时间上按顺序排成列表的若干视频文件,在XML文件中放置该控件的代码如下所示:<com.shuyu.gsyvideoplayer.video.ListGSYVideoPlayer

    23510

    Flutter初步-第一个电视直播APP「建议收藏」

    #Flutter安装 千篇一律,不多介绍,我用的是Android studio的安卓模拟器+vscode敲代码(vscode插件里面加几个插件扩展(extensions),使dart语言敲起来更省时间...插件如下) Awesome Flutter Snippets//能省去大量时间写架子 Dart Flutter #注意事项 在敲代码的时候很多括号会让自己写晕,所以要保持一个良好的习惯,该换行的换行...#在写Flutter之前你应该了解的一些操作: vscode里flutter相关操作: *如果你的flutter安装正确,就可以开始了解终端里flutter的一些用得到的命令: flutter doctor...//检查flutter整个功能是否正常 flutter create 文件夹名//创建一个包含demo的工作文档 flutter run//在编程无错误的情况下在设备上编译,安装,并调试程序 r//在调试中更新代码...package:flutter/material.dart';//flutter默认的一套UI import 'package:video_player/video_player.dart';//一个video

    2.3K40

    【译】Flutter 1.20 发布

    自动填充移动文本字段 一段时间以来,最受用户欢迎的功能之一是为 Flutter 程序中对文本自动填充在 Android 和 iOS提供支持。...image 要查看如何将集成 InteractiveViewer 到自己的应用程序中,请查看API文档,你可以在 DartPad 中使用它。...对于插件客户而言,这些工具仍然可以理解旧的 pubspec 格式,在未来一段时间内 pub.dev上所有使用旧格式的现有插件将继续与Flutter应用程序配合使用。...Typesafe platform channels for platform interop 为了响应用户调查中插件作者的普遍需求,最近我们一直在尝试如何使 Flutter 与主机平台之间的通信对于插件和...image 虽然仍然处于预发行阶段,但是 Pigeon 已经变得足够成熟,因此我们可以在 video_player 插件中使用它。

    4K10

    移动端的国产视频播放器GSYVideoPlayer

    尽管小水母版本的新建App工程采用Kotlin编码,不过GSYVideoPlayer支持Java编码,所以仍然可以在Java代码中调用GSYVideoPlayer。...三、在App代码中使用播放器 GSYVideoPlayer提供了三种播放器控件,分别是NormalGSYVideoPlayer、GSYADVideoPlayer和ListGSYVideoPlayer,它们在...App代码中的用法分别说明如下: 1、普通播放器NormalGSYVideoPlayer NormalGSYVideoPlayer用来播放单个视频文件,在XML文件中放置该控件的代码如下所示: 2、广告播放器GSYADVideoPlayer GSYADVideoPlayer用来播放视频文件的片头广告,注意该控件要和NormalGSYVideoPlayer搭配使用。...ListGSYVideoPlayer ListGSYVideoPlayer用来播放在时间上按顺序排成列表的若干视频文件,在XML文件中放置该控件的代码如下所示: <com.shuyu.gsyvideoplayer.video.ListGSYVideoPlayer

    35010

    Flutter 2.8 release 发布,快来看看新特性吧

    与往常一样,Flutter 的工作的第一位就是保证质量,我们花费了大量时间来确保 Flutter 在支持的设备范围内可以尽可能平稳和稳健地运行。...例如在 Android 上渲染第一帧之前,Flutter 现在 只通知 Dart VM TRIM_LEVEL_RUNNING_CRITICAL 及以上的内存压力信号,在本地测试中,这个更改将低端设备上的第一帧时间减少了多达...如果开发者使用的是 google_maps_flutter 插件或 video_player 插件的 web 版本,或者你已经遵循了 Flutter 团队关于如何优化网络上显示图像的建议,那么您其实已经在使用...所以该版本会复用早期平台视图创建的画布,这意味着开发者可以在 HtmlElementView 的 Web 应用中拥有多个实例而不会降低性能,同时还可以减少使用平台视图时的滚动卡顿。...100% Dart 中实现用于特定平台的功能,所以当没有任何本机类可以使用,但你仍想将你的包指定为仅支持某些平台时,请改用该dartPluginClass 属性: flutter: plugin:

    4.2K20
    领券