通过本篇博文你可以了解如下知识点:
1、VideoPlayerController播放视频的简单使用
2、Flutter状态理念认知的巩固
3、AspectRatio的简单使用
本篇博文demo的功能(demo源码点此查看):
1、加载播放视频,并且点击视频区域可以对视频start/pause
2、网络状态发生变化的时候相关处理:当是wifi状态下直接播放视频,当断网的时候暂停视频播放,并且显示一个圆形加载框
是的,功能很简单,但是着手写这个demo的时候倒是体会到了不少东西。闲言少叙,开车吧。
项目需要的第三方库需要在pubspec.yaml里面配置:
//通过asset文件进行播放
VideoPlayerController controller=VideoPlayerController.asset(
'videos/butterfly.mp4',
package: 'flutter_gallery_assets',
)
如果想要播放网络视频的话就使用network方法:
static const String beeUri = 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';
final VideoPlayerController beeController = VideoPlayerController.network(beeUri);
在播放视频的时候需要先调用initialize()方法初始化,该方法为异步方法,返回一个Future对象。在initialize()调用之前调用play()方法是没法播放的,initialize()初始化完成后会自动播放。 那么完成了initialize之后怎么让视频渲染出来呢?就需要将controller对象交给VideoPlayer(controller)
。另外Controller对象还提供了对视频的pause()和seekTo等常规方法。
上面说过初始化的过程的过程是一个异步过程,完成初始化可能需要耗费一定的时间,那么在这个时间端内我们肯定要展示用户展示一个提示,不如加载框的提示。所以demo中提供了如下代码来标识视频正在初始化:
///视频正在加载的界面
Widget _buildInitingWidget(){
return AspectRatio(
aspectRatio: 3 / 2,
child: Stack(
children: [
VideoPlayer(controller),
///健在进度框
const Center(child: CircularProgressIndicator()),
],
fit: StackFit.expand,
),
);
}
上述代码中使用了AspectRatio
这个组件,这个组件可以某个UI展示固定的宽高比,在这里我们让视频的宽高比定义为3/2.运行效果如下:
当初始化完毕后就改变状态,不展示加载框就行了,核心代码如下:
@override
void initState() {
super.initState();
controller.initialize().then((value){
///调用setState方法重绘UI
setState(() {
///判断是否初始化
_isInit = controller.value.initialized;
});
});
}
重写State的build方法:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('点击视频可暂停和播放'),
),
body: Center(
child: _isInit? _buildPlayingWidget():_buildInitingWidget()
),
);
}
核心主要是这句child: _isInit? _buildPlayingWidget():_buildInitingWidget()
:
如果是初始化完毕,则显示播放界面,否则展示初始化的页面。如果要相应点击视频页面对视频进行暂停和播放的话,可以套一个GestureDetector
组件(主要代码点此查看):
child: GestureDetector(
onTap: () {
if (controller.value.isPlaying) {
controller.pause();
} else {
controller.play();
}
},
child: VideoPlayer(controller),
));
当然,如果要考虑到监听网络变化的话而对视频进行播放暂停控制,可以参考博主的Flutter网络状态变化监听和demo源码,此处不再赘述,主要方法还是build方法:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('监听网络变化'),
),
body: Center(
child: _isInit?ConnectWidget(
///wifi网络环境
wifiConnectWidget:PlayInWifiStatelessWidget(controller: controller,),
///移动网络
mobileConnectWidget: PlayInMobileStatefulWidget(controller: controller,),
///无网络
noneConnectWidget: PlayNonConnectStatelessWidget(controller: controller,)
):PlayNonConnectStatelessWidget(controller: controller,)
),
);
博客项目demo源码
参考资料:Flutter官方视频播放资料
Flutter网络状态变化监听