Flutter videoplayer

Posted 123_000000

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter videoplayer相关的知识,希望对你有一定的参考价值。

视频播放项目地址
效果图

从pub.dev搜索视频播放库,但都不能满足要求,最后下载flick-video项目代码,做了功能简化和修改。

实现功能:

列表播放时,不支持拖动修改进度亮度声音,避免滑动冲突,全屏和单一视频播放时支持

1、屏幕左侧上下滑动修改屏幕亮度
2、屏幕右侧上下滑动修改视频音量
3、横向滑动切换播放进度
4、长按2倍速播放
5、支持全屏播放,并且全屏时可手动切换全屏播放方向
6、列表滑动自动播放

代码结构

Container(
          width: double.infinity,
          height: 200,
          child: VideoPlayerWidget(
              videoManager: videoManager,
              videoWithControls: VideoPlayerWithControlWidget(
                controls:VideoControlWidget(videoManager: videoManager),
              )),
        ),

1. VideoPlayerWidget

使用MultiProvider注册监听
videoManagerModel :控制video player,播放暂停设置监听等操作;
viewManagerModel :控制播放过程的ui更新;

2. VideoPlayerWithControlWidget

置放视频播放器,即一些触屏操作
GestureDetector:点击、长按、横向拖动、纵向拖动操作

3 . VideoControlWidget

视频播放控制界面,操作时通过model执行操作更新界面
=注意Stack内部Positioned的lef top bottom right 对子组件尺寸的影响,开发过程遇到 因为位置设置错误影响其他组件被遮挡看不见 误以为未显示 的问题=

整个项目实质两个叠加界面 下层视频界面负责播放 上层ui界面负责控制,最外层MultiProvider监听

开发过程遇到的问题

1. Volume和Brightness调控需要通过MethodChannel

2. Satck内部Positioned位置对尺寸的影响

3. 全屏播放使用OverlayEntry显示,控制屏幕方向 实现

4. 注意状态切换,videoManagerModle中_videoListener()中有详细区分


以上是关于Flutter videoplayer的主要内容,如果未能解决你的问题,请参考以下文章

Flutter videoplayer

Flutter videoplayer

在 Flutter 中,获取 URL 但无法在 VideoPlayer 上显示视频并出现错误

flutter视频播放videoplayer与chewie

Flutter视频和图片轮播

错误记录Flutter 混合开发获取 BinaryMessenger 报错 ( FlutterActivityAndFragmentDelegate.getFlutterEngine() )(代码片段