flutter的VideoPlayer 需要引入第三方框架来实现
//依赖
video_player: ^0.10.11
三方框架原地址
VideoPlayer的简单使用
class MyHome extends StatefulWidget { //必须写在有状态组件内
@override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State {
VideoPlayerController _controller; //先定义一个VideoPlayer的控制器变量
@override
void initState() { //重写组件初始化方法
// TODO: implement initState
super.initState();
_controller=VideoPlayerController.network(//定义连接器内容，这里初学者可能有点难懂下面详细讲
"http://shuixian.nihaozuida.com/20200622/5973_858fd5b6/index.m3u8"
)..initialize().then((a){
setState(() {
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('视频测试'),
),
body: Center(
child: _controller.value.initialized ? AspectRatio( // 这里和上面是联动的，下面详细讲
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
):Container(
width: 100,
height: 100,
color: Colors.blue,
)
),
floatingActionButton: FloatingActionButton( //随便定义一个按钮用于测试
onPressed: () {
setState(() {
_controller.value.isPlaying //设置播放状态
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
);
}
}
使用起来还是挺简单的，但是初学者的话，我标出来的那两个地方感觉还是挺难懂的，我下面会详细说一下
void initState() { //重写组件初始化方法
// TODO: implement initState
super.initState();
_controller=VideoPlayerController.network(//定义连接器内容，
"http://shuixian.nihaozuida.com/20200622/5973_858fd5b6/index.m3u8"
)..initialize().then((a){
setState(() {
});
});
}
这里是创建了一个网络连接的VideoPlayerController挺好懂的，然后后面通过级联的方式调用了控制器里面的初始化方法initialize()，因为得需要网络连接，所以这个初始化方法是一个异步方法返回一个布尔值，记住这里是异步下面会说，然后调用Then()等这个异步方法执行完毕后，进行一个页面刷新
Center(
child: _controller.value.initialized ? AspectRatio( //三元运算符
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
):Container(
width: 100,
height: 100,
color: Colors.blue,
)
),
上面这里是组件初始化的时候，进行一个三目运算，判断初始化返回的布尔值，如果为true返回一个AspectRatio控件显示视频，如果不为true我反回了一个长宽100的蓝色方块，下面看运行效果
image.png
可以看见刚运行的时候显示的是一个蓝色的方块
image.png
短暂延迟后显示的视频播放控件，因为我们VideoPlayer控制器初始化过程是一个异步过程，前面给控制器赋值的时候，等初始化完毕了进行页面刷新的异步操作，所以下面的三目运算，刚加载的时候会加载我们的蓝色方块，然后等初始化完毕，执行了刷新页面方法，三目运算就会返回咱们的视频播放控件，然后就可以播放了
代码是三方库的示例代码，基本用法就是这些大家可以尽情扩展，定义自己的播放器，例如可以把现在的蓝色方块替换成圆形进度条，有兴趣的可以去三方库查看源码，上面挂了地址
展示效果.gif
简单的实现了一些功能，加载视频的时候圆形进度，横向全屏，点击暂停等，代码在下面
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 {
@override
void initState() {
super.initState();
// Add code after super
OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight); //强制切换屏幕方向
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Video",
home: MyHome(),
);
}
}
class MyHome extends StatefulWidget {
@override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State {
VideoPlayerController _controller; //定义一个控制器变量
@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 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,
);
}
}