1、pubspec.yaml文件引入插件
dependencies:
...
video_player: ^2.8.1
2、页面使用(这里我是宽度百分百,高度自适应了)
late VideoPlayerController _controller;
Container(
width: MediaQuery.of(context).size.width,
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: FittedBox(
fit: BoxFit.cover,
child: SizedBox(
width: _controller.value.size.width,
height: _controller.value.size.height,
child: VideoPlayer(_controller),
),
),
))
// 播放视频
void playVideo(String url) {
_controller = VideoPlayerController.networkUrl(Uri.parse(url))
..initialize().then((value) { // 控件初始化后才能进行以下操作
setState(() {
});
_controller.addListener(() {
setState(() {});
});
_controller.setLooping(true); // 循环播放
_controller.play(); // 播放
});
}
3、一些其他的操作及注意事项
3.1 判断当前的视频控件是否已经初始化
if (_controller.value.isInitialized) {...} // 不能用这种方法来判断,因为控件没初始化这样写会报控件未初始化的错
// 解决方法,可以在initialize成功时setState赋值给一个变量,后续根据这个变量的值去判断是否已经初始化
3.2 切换视频链接,直接调playVideo方法传新的链接(该插件现在没有直接能切换视频链接的方法?)
_controller.pause(); // 先暂停当前的视频再去调
playVideo(newUrl);
3.3 跳转路由时视频还继续播放的问题,我想要的效果是:离开页面暂停播放,回到页面重新播放
我的解决方法是用路由监听的方式去处理(暂时不清楚有没有别的方法可以实现),详情请见(Flutter 利用路由监听页面的展示与否 - 掘金 (juejin.cn))
// 例子
// isVideoInit是用来判断控件是否初始化,在初次初始化时赋值为true
...
@override
void didPush() {
print('跳转该页面而显示');
if (!isVideoInit) {
// 视频播放
playVideo(url);
} else {
// 视频播放
_controller.play();
}
}
@override
void didPushNext() {
print('跳转下一个页而隐藏');
if (isVideoInit) {
_controller.pause();
}
}
@override
void didPop() {
print('当前页面被pop而隐藏');
if (isVideoInit) {
_controller.pause();
}
}
@override
void didPopNext() {
print('上一个页面关闭而显示');
if (!isVideoInit) {
// 视频播放
playVideo(url);
} else (isVideoInit) {
// 视频播放
_controller.play();
}
}
...
3.4 控件的部分操作
// 播放
_controller.play()
// 暂停
_controller.pause()
// 设置视频的音量
_controller.setVolume(0.5); // 值0~1.0
// 是否初始化、播放;音量值等
_controller.value.xxx