Flutter：基于video_player实现视频相关手势控制、全屏播放

m0_66264673

于 2022-02-03 17:30:55 发布

阅读量1.1k

点赞数

分类专栏：程序员文章标签：架构移动开发 android

本文链接：https://blog.youkuaiyun.com/m0_66264673/article/details/122777267

版权

本文详细介绍了如何在Flutter中使用video_player库实现视频播放，并提供了手势控制和全屏播放的实现方法。通过定义不同类型的VideoPlayerUI组件，初始化视频并监听加载状态，以及使用VideoPlayerControl组件进行控制，包括轻触显示控制界面、全屏切换和进度条刷新。此外，文章还讨论了Android开发者除Flutter之外还需要掌握的技术领域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.1. 定义属性

这里定义了三种读取视频的方式network、asset、file，分别对应网络视频、工程视频、本地视频文件：

class VideoPlayerUI extends StatefulWidget {
VideoPlayerUI.network({
Key key,
@required String url, // 当前需要播放的地址
this.width: double.infinity, // 播放器尺寸（大于等于视频播放区域）
this.height: double.infinity,
this.title = ‘’, // 视频需要显示的标题
}) : type = VideoPlayerType.network,
url = url,
super(key: key);

VideoPlayerUI.asset({
Key key,
@required String dataSource, // 当前需要播放的地址
this.width: double.infinity, // 播放器尺寸（大于等于视频播放区域）
this.height: double.infinity,
this.title = ‘’, // 视频需要显示的标题
}) : type = VideoPlayerType.asset,
url = dataSource,
super(key: key);

VideoPlayerUI.file({
Key key,
@required File file, // 当前需要播放的地址
this.width: double.infinity, // 播放器尺寸（大于等于视频播放区域）
this.height: double.infinity,
this.title = ‘’, // 视频需要显示的标题
}) : type = VideoPlayerType.file,
url = file,
super(key: key);

final url;
final VideoPlayerType type;
final double width;
final double height;
final String title;

@override
_VideoPlayerUIState createState() =&g