flutter 系列之: 在 flutter 中使用媒体播放器

作者：程序那些事

2023-03-28
广东
本文字数：2050 字
阅读完需：约 7 分钟

简介

现在的 app 功能越来越强大，除了基本的图文之外，还需要各种各样的其他的功能,比如视频，和直播。

直播可能会比较复杂，因为涉及到了拉流和推流，需要服务器端的支持，但是视频播放就比较简单了，那么如何在 flutter 中使用媒体播放器呢？

一起来看看吧。

使用前的准备工作

flutter 本身是不支持媒体播放功能的，为了实现这个功能，我们需要使用额外的第三方插件叫做 video_player。

首先我们需要向 flutter 应用中添加 video_player。添加起来也非常简单，只需要执行下面的命令即可：

flutter pub add video_player

复制代码

该命令会向 pubspec.xml 中添加如下的内容：

dependencies:  flutter:    sdk: flutter
  video_player: ^2.4.7

复制代码

添加好依赖包之后，我们还需要为应用添加相应的权限，你确保能够使用影音播放的权限。

如果是在 android 中，需要向 AndroidManifest.xml 文件中添加类似下面的内容：

<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 有好几种构造方法，我们一起来看看。

  VideoPlayerController.asset

复制代码

asset 方法表示 video 是从应用程序的 asset 中获取的。

 VideoPlayerController.network

复制代码

network 方法表示 video 是从网络中获取的。

  VideoPlayerController.file

复制代码

file 方法表示 video 是通过'file://${file.path}' 这样的格式来获取的。

还有一个只用在 andorid 中的方法,表示从 contentUri 中加载 video:

  VideoPlayerController.contentUri

复制代码

为了简单起见，这里我们选择网易上面的一个科教视频，作为要播放的 video。

那么我们可以通过 VideoPlayerController.network 方法来构建这个 controller:

    videoPlayerController = VideoPlayerController.network(      'https://flv.bn.netease.com/1c04bfd72901f0661b486465e09cfdc01754c20db0686786f4e20a5f7d271ba0de6c1177a0da1c4c2d7c367e20ee16d4a90ac7ff4ea664820ba1b401f3e53f135f72cdff855e78ca5fb7849fb6ff7ccb9de1613ad3bfc59db83493b5f18a0a27f15048df6585361cd67c3b37551e10981c40dcdfdb77b7e6.mp4',    );

复制代码

在使用 video 之前，还需要进行初始操作，初始化是调用它的 initialize 方法，这个方法的作用是打开给定的数据源，并加载它的元数据。

因为 initialize 方法是一个耗时的操作，所以这个方法返回类型是 Future:

  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,              child: VideoPlayer(videoPlayerController),            );          } else {            return const Center(              child: CircularProgressIndicator(),            );          }        },      ),

复制代码

在 FutureBuilder 中，我们通过判断 connectionState 来判断视频是否加载完毕，如果没有加载完毕，则使用 CircularProgressIndicator 表示正在加载中。

如果加载完毕之后，就直接展示 VideoPlayer 组件即可。

因为不同的 video 有不同的纵横比，为了在 flutter 界面上完美的展示加载的 video，我们将 VideoPlayer 封装在一个 AspectRatio 组件中。

最后我们还要添加一个控制装置，用来控制 video 的暂停和播放：

floatingActionButton: FloatingActionButton(        onPressed: () {          setState(() {            if (videoPlayerController.value.isPlaying) {              videoPlayerController.pause();            } else {              videoPlayerController.play();            }          });        },        child: Icon(          videoPlayerController.value.isPlaying ? Icons.pause : Icons.play_arrow,        ),      )

复制代码

这里通过 videoPlayerController.value.isPlaying 来判断视频是否在播放状态，同时在 onPressed 方法中调用了 setState 来调用 videoPlayerController.pause 或者 videoPlayerController.play 方法。