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

简介

当初的 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 办法。

总结

这样一个能够播放内部视频的 app 就做好了，运行之后它的界面是这样的：

大家能够在这个播放器的根底上进行扩张，一个属于你本人的视频 APP 就实现了。

本文的例子：https://github.com/ddean2009/learn-flutter.git