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