Flutter之播放视频

通过本篇博文你可以了解如下知识点：
1、VideoPlayerController播放视频的简单使用
2、Flutter状态理念认知的巩固
3、AspectRatio的简单使用

本篇博文demo的功能（demo源码点此查看）：
1、加载播放视频，并且点击视频区域可以对视频start/pause
2、网络状态发生变化的时候相关处理：当是wifi状态下直接播放视频，当断网的时候暂停视频播放，并且显示一个圆形加载框

是的，功能很简单，但是着手写这个demo的时候倒是体会到了不少东西。闲言少叙，开车吧。

项目需要的第三方库需要在pubspec.yaml里面配置：

 

VideoPlayerController的简单说明
VideoPlayerController顾名思义，就是对视频进行播放控制的，它提供了三个视频播放源：从网络播放，从assets文件里面播放，
从file播放，比如本博文使用的是assets文件里的视频进行播放的，代码如下：
//通过asset文件进行播放
VideoPlayerController controller=VideoPlayerController.asset(
'videos/butterfly.mp4',
package: 'flutter_gallery_assets',
)
1
2
3
4
5
如果想要播放网络视频的话就使用network方法：

static const String beeUri = 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';
final VideoPlayerController beeController = VideoPlayerController.network(beeUri);
1
2
在播放视频的时候需要先调用initialize()方法初始化，该方法为异步方法,返回一个Future对象。在initialize()调用之前调用play()方法是没法播放的，initialize()初始化完成后会自动播放。 那么完成了initialize之后怎么让视频渲染出来呢？就需要将controller对象交给VideoPlayer(controller) 。另外Controller对象还提供了对视频的pause（）和seekTo等常规方法。

上面说过初始化的过程的过程是一个异步过程，完成初始化可能需要耗费一定的时间，那么在这个时间端内我们肯定要展示用户展示一个提示，不如加载框的提示。所以demo中提供了如下代码来标识视频正在初始化：

///视频正在加载的界面
Widget _buildInitingWidget(){
return AspectRatio(
aspectRatio: 3 / 2,
child: Stack(
children: <Widget>[
VideoPlayer(controller),
///健在进度框
const Center(child: CircularProgressIndicator()),
],
fit: StackFit.expand,
),
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
上述代码中使用了AspectRatio这个组件，这个组件可以某个UI展示固定的宽高比，在这里我们让视频的宽高比定义为3/2.运行效果如下：

当初始化完毕后就改变状态，不展示加载框就行了，核心代码如下：

@override
void initState() {
super.initState();
controller.initialize().then((value){
///调用setState方法重绘UI
setState(() {
///判断是否初始化
_isInit = controller.value.initialized;

});
});
}
1
2
3
4
5
6
7
8
9
10
11
12
重写State的build方法：

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('点击视频可暂停和播放'),
),
body: Center(
child: _isInit? _buildPlayingWidget():_buildInitingWidget()
),
);

}
1
2
3
4
5
6
7
8
9
10
11
12
核心主要是这句child: _isInit? _buildPlayingWidget():_buildInitingWidget()：
如果是初始化完毕，则显示播放界面，否则展示初始化的页面。如果要相应点击视频页面对视频进行暂停和播放的话，可以套一个GestureDetector组件（主要代码点此查看）：

child: GestureDetector(
onTap: () {
if (controller.value.isPlaying) {
controller.pause();
} else {
controller.play(http://www.my516.com);
}
},
child: VideoPlayer(controller),
));
1
2
3
4
5
6
7
8
9
10
当然，如果要考虑到监听网络变化的话而对视频进行播放暂停控制，可以参考博主的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,)
),
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
博客项目demo源码
参考资料：Flutter官方视频播放资料
Flutter网络状态变化监听
---------------------