通過本篇博文你可以了解如下知識點：
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網絡狀態變化監聽
---------------------