flutter的VideoPlayer 需要引入第三方框架來實(shí)現(xiàn)
//依賴
video_player: ^0.10.11
VideoPlayer的簡(jiǎn)單使用
class MyHome extends StatefulWidget { //必須寫在有狀態(tài)組件內(nèi)
@override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State<MyHome> {
VideoPlayerController _controller; //先定義一個(gè)VideoPlayer的控制器變量
@override
void initState() { //重寫組件初始化方法
// TODO: implement initState
super.initState();
_controller=VideoPlayerController.network(//定義連接器內(nèi)容雀彼，這里初學(xué)者可能有點(diǎn)難懂下面詳細(xì)講
"http://shuixian.nihaozuida.com/20200622/5973_858fd5b6/index.m3u8"
)..initialize().then((a){
setState(() {
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('視頻測(cè)試'),
),
body: Center(
child: _controller.value.initialized ? AspectRatio( // 這里和上面是聯(lián)動(dòng)的，下面詳細(xì)講
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
):Container(
width: 100,
height: 100,
color: Colors.blue,
)
),
floatingActionButton: FloatingActionButton( //隨便定義一個(gè)按鈕用于測(cè)試
onPressed: () {
setState(() {
_controller.value.isPlaying //設(shè)置播放狀態(tài)
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
);
}
}
使用起來還是挺簡(jiǎn)單的即寡，但是初學(xué)者的話徊哑，我標(biāo)出來的那兩個(gè)地方感覺還是挺難懂的，我下面會(huì)詳細(xì)說一下
void initState() { //重寫組件初始化方法
// TODO: implement initState
super.initState();
_controller=VideoPlayerController.network(//定義連接器內(nèi)容聪富，
"http://shuixian.nihaozuida.com/20200622/5973_858fd5b6/index.m3u8"
)..initialize().then((a){
setState(() {
});
});
}
這里是創(chuàng)建了一個(gè)網(wǎng)絡(luò)連接的VideoPlayerController挺好懂的莺丑，然后后面通過級(jí)聯(lián)的方式調(diào)用了控制器里面的初始化方法initialize()，因?yàn)榈眯枰W(wǎng)絡(luò)連接善涨，所以這個(gè)初始化方法是一個(gè)異步方法返回一個(gè)布爾值窒盐，記住這里是異步下面會(huì)說，然后調(diào)用Then()等這個(gè)異步方法執(zhí)行完畢后钢拧，進(jìn)行一個(gè)頁面刷新
Center(
child: _controller.value.initialized ? AspectRatio( //三元運(yùn)算符
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
):Container(
width: 100,
height: 100,
color: Colors.blue,
)
),
上面這里是組件初始化的時(shí)候蟹漓，進(jìn)行一個(gè)三目運(yùn)算，判斷初始化返回的布爾值源内，如果為true返回一個(gè)AspectRatio控件顯示視頻葡粒，如果不為true我反回了一個(gè)長(zhǎng)寬100的藍(lán)色方塊，下面看運(yùn)行效果
可以看見剛運(yùn)行的時(shí)候顯示的是一個(gè)藍(lán)色的方塊
短暫延遲后顯示的視頻播放控件膜钓，因?yàn)槲覀僔ideoPlayer控制器初始化過程是一個(gè)異步過程嗽交，前面給控制器賦值的時(shí)候，等初始化完畢了進(jìn)行頁面刷新的異步操作颂斜，所以下面的三目運(yùn)算夫壁，剛加載的時(shí)候會(huì)加載我們的藍(lán)色方塊，然后等初始化完畢沃疮，執(zhí)行了刷新頁面方法盒让，三目運(yùn)算就會(huì)返回咱們的視頻播放控件，然后就可以播放了
代碼是三方庫的示例代碼司蔬，基本用法就是這些大家可以盡情擴(kuò)展邑茄，定義自己的播放器，例如可以把現(xiàn)在的藍(lán)色方塊替換成圓形進(jìn)度條俊啼，有興趣的可以去三方庫查看源碼肺缕，上面掛了地址
簡(jiǎn)單的實(shí)現(xiàn)了一些功能，加載視頻的時(shí)候圓形進(jìn)度，橫向全屏同木，點(diǎn)擊暫停等浮梢，代碼在下面
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:orientation/orientation.dart';
import 'package:video_player/video_player.dart';
void main(){
return runApp(MyApp2());
}
class MyApp2 extends StatefulWidget {
@override
_MyApp2State createState() => _MyApp2State();
}
class _MyApp2State extends State<MyApp2> {
@override
void initState() {
super.initState();
// Add code after super
OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight); //強(qiáng)制切換屏幕方向
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Video",
home: MyHome(),
);
}
}
class MyHome extends StatefulWidget {
@override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State<MyHome> {
VideoPlayerController _controller; //定義一個(gè)控制器變量
@override
void initState() {
// TODO: implement initState
super.initState();
_controller=VideoPlayerController.network(
"http://shuixian.nihaozuida.com/20200622/5973_858fd5b6/index.m3u8"
)..initialize().then((a){
setState(() {
_controller.play();
});
});
}
@override
Widget build(BuildContext context) {
int dyone=0;
var isPlay=_controller.value.isPlaying;
List<Widget> a1=List();
a1.add(Center(
child:GestureDetector(
onTap: (){
setState(() {
_controller.value.isPlaying?
_controller.pause():_controller.play();
});
},
child: _controller.value.initialized ? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
):CircularProgressIndicator(backgroundColor: Colors.white,))
));
if(_controller.value.initialized&&!isPlay){
a1.add(Icon(Icons.arrow_drop_down_circle,size: 100));
}
return new Stack(
alignment: Alignment.center,
children:a1,
);
}
}
