1、pubspec.yaml文件引入插件
dependencies: ... video_player: ^2.8.1
2、页面使用(这里我是宽度百分百,高度自适应了)
late VideoPlayerController _controller; Container( width: MediaQuery.of(context).size.width, child: AspectRatio( aspectRatio: _controller.value.aspectRatio, child: FittedBox( fit: BoxFit.cover, child: SizedBox( width: _controller.value.size.width, height: _controller.value.size.height, child: VideoPlayer(_controller), ), ), )) // 播放视频 void playVideo(String url) { _controller = VideoPlayerController.networkUrl(Uri.parse(url)) ..initialize().then((value) { // 控件初始化后才能进行以下操作 setState(() { }); _controller.addListener(() { setState(() {}); }); _controller.setLooping(true); // 循环播放 _controller.play(); // 播放 }); }
3、一些其他的操作及注意事项
3.1 判断当前的视频控件是否已经初始化
if (_controller.value.isInitialized) {...} // 不能用这种方法来判断,因为控件没初始化这样写会报控件未初始化的错 // 解决方法,可以在initialize成功时setState赋值给一个变量,后续根据这个变量的值去判断是否已经初始化
3.2 切换视频链接,直接调playVideo方法传新的链接(该插件现在没有直接能切换视频链接的方法?)
_controller.pause(); // 先暂停当前的视频再去调 playVideo(newUrl);
3.3 跳转路由时视频还继续播放的问题,我想要的效果是:离开页面暂停播放,回到页面重新播放
我的解决方法是用路由监听的方式去处理(暂时不清楚有没有别的方法可以实现),详情请见Flutter 利用路由监听页面的展示与否。
// 例子 // isVideoInit是用来判断控件是否初始化,在初次初始化时赋值为true ... @override void didPush() { print('跳转该页面而显示'); if (isVideo && !isVideoInit) { // 视频播放 playVideo(url); } if (isVideo && isVideoInit) { // 视频播放 _controller.play(); } } @override void didPushNext() { print('跳转下一个页而隐藏'); if (isVideo) { _controller.pause(); } } @override void didPop() { print('当前页面被pop而隐藏'); if (isVideo) { _controller.pause(); } } @override void didPopNext() { print('上一个页面关闭而显示'); if (isVideo && !isVideoInit) { // 视频播放 playVideo(url); } if (isVideo && isVideoInit) { // 视频播放 _controller.play(); } } ...
3.4 控件的部分操作
// 播放 _controller.play() // 暂停 _controller.pause() // 设置视频的音量 _controller.setVolume(0.5); // 值0~1.0 // 是否初始化、播放;音量值等 _controller.value.xxx
标签:视频,控件,isVideo,初始化,player,controller,video,播放,Flutter From: https://www.cnblogs.com/atao24/p/17916615.html