首页
学习
活动
专区
工具
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单引擎和外接纹理内存优化探索之路

    而且,出现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, 再将进度数据设置给

    45610

    使用Flutter开发抖音国际版实例代码详解

    简介 最近花了两天时间研究使用Flutter开发一个抖音国际版. 个人感觉使用Flutter开发app快得不要不要额. 两天就基本可以开发个大概出来. 最主要是热重载,太方便实时调整UI布局了....详细说明一下,开发主要在lib文件夹 pubspec.yaml是配置插件位置,如http: ^0.12.0+4,类似依赖组件. common文件夹存放是重写网络组件,以及图标组件icons.dart...config文件夹存放api.dart,wei调用api配置文件 models文件存放实体层 screen文件夹存放页面view层 tabs存放底部切换文件夹层 widgets存放组件,包含视频播放组件...展示抖音视频 import 'package:flutter/material.dart'; import 'package:flutter_app/models/Tiktok.dart'; import...地址:https://github.com/WangCharlie/douyin 总结 到此这篇关于使用Flutter开发抖音国际版文章就介绍到这了,更多相关flutter抖音国际版内容请搜索ZaLou.Cn

    1.5K40

    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

    【老孟FlutterFlutter 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

    19210

    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.2K40

    【译】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

    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
    领券