目录
- 简介
- 使用前的准备工作
- 在flutter中使用video_player
- 总结
简介
直播可能会比较复杂,因为涉及到了拉流和推流,需要服务器端的支持,但是视频播放就比较简单了,那么如何在flutter中使用媒体播放器呢?
使用前的准备工作
flutter本身是不支持媒体播放功能的,为了实现这个功能,我们需要使用额外的第三方插件叫做video_player。
flutter pub add video_player
该命令会向pubspec.xml中添加如下的内容:
dependencies:
flutter:
sdk: flutter
video_player: ^2.4.7
添加好依赖包之后,我们还需要为应用添加相应的权限,你确保能够使用影音播放的权限。
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application ...>
</application>
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>
在IOS中则需要在Info.plist中添加下面的内容:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
在flutter中使用video_player
video_player中和video播放相关的类叫做VideoPlayerController,在IOS中底层使用的是AVPlayer,在Android中底层使用的是ExoPlayer。
VideoPlayerController.asset
asset方法表示video是从应用程序的asset中获取的。
VideoPlayerController.network
network方法表示video是从网络中获取的。
VideoPlayerController.file
file方法表示video是通过'file://${file.path}' 这样的格式来获取的。
VideoPlayerController.contentUri
为了简单起见,这里我们选择网易上面的一个科教视频,作为要播放的video。
videoPlayerController = VideoPlayerController.network(
'https://flv.bn.netease.com/1c04bfd72901f0661b486465e09cfdc01754c20db0686786f4e20a5f7d271ba0de6c1177a0da1c4c2d7c367e20ee16d4a90ac7ff4ea664820ba1b401f3e53f135f72cdff855e78ca5fb7849fb6ff7ccb9de1613ad3bfc59db83493b5f18a0a27f15048df6585361cd67c3b37551e10981c40dcdfdb77b7e6.mp4',
;
在使用video之前,还需要进行初始操作,初始化是调用它的initialize方法,这个方法的作用是打开给定的数据源,并加载它的元数据。
Future<void> initialize( async {
我们可以这样使用:
late Future<void> playerFuture;
playerFuture = videoPlayerController.initialize(;
有了播放器的Future,我们可以配合flutter中的FutureBuilder一起使用:
body: FutureBuilder(
future: playerFuture,
builder: (context, snapshot {
if (snapshot.connectionState == ConnectionState.done {
return AspectRatio(
aspectRatio: videoPlayerController.value.aspectRatio,