0
点赞
收藏
分享

微信扫一扫

Flutter视频播放、Flutter VideoPlayer 视频播放组件精要

caoxingyu 2022-02-06 阅读 93

在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。

  • 优美的音乐节奏带你浏览这个效果的编码过程
  • 坚持每一天,是每个有理想青年的追求
  • 追寻年轻人的脚步,也许你的答案就在这里

1 添加依赖

pub仓库地址在这里:点击查看pub仓库

# 视频播放
video_player: ^1.0.1

2 播放视频前的准备

2.1 网络访问权限

在 ios 目录下的 info.plist 清单文件中配置 iOS设置的http网络访问权限 :

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

如下图所示

Flutter视频播放、Flutter VideoPlayer 视频播放组件精要_前端

在 android 目录下的 AndroidManifest.xml 清单文件中配置网络请求权限以及http的访问权限

<!--    网络请求权限-->
<uses-permission android:name="android.permission.INTERNET" />
<!--外部文件存储权限-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Flutter视频播放、Flutter VideoPlayer 视频播放组件精要_iOS_02

networkSecurityConfig 配置的是 http访问权限

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true" />
</network-security-config>

目录结构如下:

Flutter视频播放、Flutter VideoPlayer 视频播放组件精要_flutter_03

3 视频播放

视频资源的加载以及播放控制全部是通过 VideoPlayerController来操作的

3.1 视频资源的加载
VideoPlayerController  _playerController ;
@override
void initState() {
super.initState();

//网络链接
//VideoPlayerController.network(url);
//VideoPlayerController.file(File(url));
//本地链接
_videoPlayerController =
VideoPlayerController.asset("asset资源路径");

//调用初始化方法
_videoPlayerController.initialize()
//异步执行完的回调
..whenComplete(() {
//刷新页面
setState(() {});
});

}
3.2 视频播放组件
AspectRatio(
//设置视频的大小 宽高比。长宽比表示为宽高比。例如,16:9宽高比的值为16.0/9.0
aspectRatio: _videoPlayerController.value.aspectRatio,
//播放视频的组件
child: VideoPlayer(_videoPlayerController),
),
)
3.3 视频播放相关控制
//获取当前视频播放的信息
VideoPlayerValue videoPlayerValue = _videoPlayerController.value;

//是否初始化完成
bool initialized = videoPlayerValue.initialized;
//是否正在播放
bool isPlaying = videoPlayerValue.isPlaying;
//当前播放的视频的宽高比例
double aspectRatio = videoPlayerValue.aspectRatio;
//当前视频是否缓存
bool isBuffer = videoPlayerValue.isBuffering;
//当前视频是否循环
bool isLoop = videoPlayerValue.isLooping;
//当前播放视频的总时长
Duration totalDuration = videoPlayerValue.duration;
//当前播放视频的位置
Duration currentDuration = videoPlayerValue.position;
if (initialized) {
// 视频已初始化
if (isPlaying) {
// 正播放 --- 暂停
_videoPlayerController.pause();
} else {
//暂停 ----播放
_videoPlayerController.play();
}
setState(() {});
} else {
//未初始化
_videoPlayerController.initialize().then((_) {
// videoPlayerController.play();
// setState(() {});
});
}

视频信息如下:

举报

相关推荐

0 条评论