在Flutter中虽然官方提供了video_player来播放视频
video_player官网链接:video_player | Flutter Package
但是video_player只有单纯的播放功能,进度条 全屏这些功能只能自己实现
所以chewi出现了,是基于video_player的视频播放库,拥有视频进度条,全屏,播放速度控制等功能
chewi官网链接:chewie | Flutter Package
下面介绍如何使用这两个库:
如果你的视频是网络视频,那么需要做以下准备工作
如果你的设备是Android,则需要配置网络权限
<uses-permission android:name="android.permission.INTERNET"/>
如下位置:
如果你的设备是IOS
也需要配置权限
<key>NSAppTransportSecurity</key>
先来介绍video_player的用法
1.首先在pubspec.yaml文件里写上
video_player: ^2.4.4
如下所示:
然后点击右上角的Pub get
如下所示
2.新建一个类,如下所示
class VideoPlayWidget extends StatefulWidget {
const VideoPlayWidget({Key? key}) : super(key: key);
@override
State<VideoPlayWidget> createState() => _VideoPlayWidgetState();
}
class _VideoPlayWidgetState extends State<VideoPlayWidget> {
@override
Widget build(BuildContext context) {
return Container();
}
}
3.定义VideoPlayerController
late VideoPlayerController _controller;
初始化_controller
下面的url就是你想要播放的视频地址
_controller = VideoPlayerController.network(
url)
..initialize().then((_) {
setState(() {
_controller.play();
_controller.setLooping(false);
if (second != null) {
Duration duration = Duration(seconds: second!);
_controller.seekTo(duration);
}
});
});
把控制器放入VideoPlayer播放
@override
Widget build(BuildContext context) {
return _controller.value.isInitialized
? VideoPlayer(_controller)
: Container();
}
运行项目,可以看到视频出来了,非常简单
但是此时视频比例不合适,这时我们要用到AspectRatio
@override
Widget build(BuildContext context) {
return _controller.value.isInitialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller))
: Container();
}
再次运行项目,可以看到视频保持了合适的比例播放
下面我们再介绍chewie的用法,和上面video_player用法差不多
1.首先在pubspec.yaml文件里写上如下内容,因为chewie是基于view_player,所以view_player也要一起写上
chewie: ^1.3.3
video_player: ^2.4.4
这时需要定义两个控制器
一个是VideoPlayer的 一个是chewie的
late VideoPlayerController _controller;
ChewieController? chewieController;
然后初始化
_controller = VideoPlayerController.network(url)
..initialize().then((_) {
setState(() {
chewieController = ChewieController(
videoPlayerController: _controller,
autoPlay: false,
looping: true,
allowFullScreen: true,
showOptions:false,
deviceOrientationsOnEnterFullScreen: [DeviceOrientation.landscapeLeft],
deviceOrientationsAfterFullScreen:[DeviceOrientation.portraitUp],
);
});
});
然后是使用
@override
Widget build(BuildContext context) {
return _controller.value.isInitialized ?ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(5)),
child: chewieController == null?Container():Chewie(controller: chewieController!)): Container();
}
效果如下
关注V X 公众号:大前端Pro 发送关键字 视频播放 获取示例代码