简介

当初的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