Flutter 中使用 video_player 播放视频
一、video_player 插件
Flutter 中提供了 video_player
插件来播放控制视频,支持本地存储文件和网络视频文件。
当然本质上还是 native 封装的 iOS 上的 AVPlayer
和 Android 上的 ExoPlayer
能力
如果要使用 video_player
需要引入依赖:
dependencies:
flutter:
sdk: flutter
video_player:
构造函数
VideoPlayerController
提供了三种命名构造函数,分别是 :
- VideoPlayerController.file
- VideoPlayerController.assets
- VideoPlayerController.network
file 加载 File 类型的文件,network 可以加载网络视频
assets
和 network
的构造函数中,都可以接受 final String dataSource;
函数参数,返回 VideoPlayerController
initialize() 方法
当然,凡是 native 封装过的插件,都是需要通信的,因此提供了 initialize()
方法并且返回一个 Future 类型的属性
播放视频的 build() 也需要使用 FutureBuilder()
,
VideoPlayer Widget
视频播放使用 VideoPlayer
Widget,属性都可以通过 _controller.xxxx
设置,然后直接将 controller 传入给 VideoPlayer 即可
控制视频使用 _controller.pause()
和 _controller.play()
控制暂停和播放
权限声明
如果要在 APP 使用使用视频播放,需要更新 APP 的配置,加入权限列表,
Android
Android 需要在 AndroidManifest.xml
文件中的 <application>
配置项加入如下的权限。 AndroidManifest.xml
文件的路径是 <projectroot>/android/app/src/main/AndroidMainfest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application ...>
</application>
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>
iOS
video_player 在 ios 模拟器不能使用,需要使用真机调试
配置路径:<project root>/ios/Runner/Info.plist
路径下的 Info.plist
:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
二、使用 video_player 插件
在项目中使用 video_player
插件,视频播放是通过 VideoPlayerController
控制
视频使用一个在线示例的视频:
const String VIDEO_URL = 'https://www.runoob.com/try/demo_source/mov_bbb.mp4';
引入 video_player
import 'package:video_player/video_player.dart';
Widget initState 逻辑:
下面逻辑中,设置两个属性 _controller
和 _initializeVideoPlayerFuture
来存储 VideoPlayerController 的实例和 initialize() 之后的 Future
这里通过 VideoPlayerController.network
加载了网络视频,并且通过 _controller.setLooping(true)
设置循环播放
VideoPlayerController _controller;
Future _initializeVideoPlayerFuture;
@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(VIDEO_URL);
_controller.setLooping(true);
_initializeVideoPlayerFuture = _controller.initialize();
}
通过 FutureBuilder() 渲染视频播放器:
FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
print(snapshot.connectionState);
if (snapshot.hasError) print(snapshot.error);
if (snapshot.connectionState == ConnectionState.done) {
return AspectRatio(
// aspectRatio: 16 / 9,
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
)
通过 按钮控制视频的播放和暂停:
onPressed: () {
setState(() {
if (_controller.value.isPlaying) {
_controller.pause();
} else {
// If the video is paused, play it.
_controller.play();
}
});
效果:
在线代码
https://github.com/postbird/FlutterHelloWorldDemo/blob/master/demo1/lib/bak/main.57-VideoPlayer.dart
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/flutter-video.html
转载请注明文章原始出处 !
官方播放器限制太多了
ios上白屏,只有声音没有图像。
大佬,试过播放flv格式的么,好像放不了
不行,这个功能太少了,完全不能放在项目中,例如拖拽,快进,最主要的,放大都没有
不能自己实现快进功能吗?
所以 flutter 也是一个普通开发者无法应用的东西,一定是需要 native 注册组件的
非技术的路过。
文章不错非常喜欢