Введение

Сегодняшние приложения становятся все более мощными. Помимо базовой графики и текста, им также требуется множество других функций, таких как видео и прямые трансляции.

Прямая потоковая передача может быть более сложной, поскольку она включает в себя извлечение и отправку потоков, что требует поддержки на стороне сервера, но воспроизведение видео относительно просто. Так как же использовать медиаплеер во Flutter?

Давайте посмотрим.

Подготовка перед использованием

Сам Flutter не поддерживает функцию воспроизведения мультимедиа. Чтобы реализовать эту функцию, нам нужно использовать дополнительный сторонний плагин под названием video_player.

Сначала нам нужно добавить video_player в приложение Flutter. Добавить очень просто, достаточно выполнить следующую команду:

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>

Использование video_player во флаттере

Класс, связанный с воспроизведением видео в video_player, называется VideoPlayerController. В IOS нижний уровень — AVPlayer, а в Android — ExoPlayer.

VideoPlayerController имеет несколько методов построения, давайте рассмотрим.

  VideoPlayerController.asset

Метод ресурса указывает, что видео получено из ресурса приложения.

 VideoPlayerController.network

Сетевой метод указывает, что видео получено из сети.

  VideoPlayerController.file

Метод file указывает, что видео получено в формате «file://${file.path}».

Существует также метод, используемый только в andorid, который означает загрузку видео из contentUri:

  VideoPlayerController.contentUri

Для простоты здесь мы выбираем научно-образовательное видео на NetEase в качестве видео для воспроизведения.

Затем мы можем построить этот контроллер с помощью метода VideoPlayerController.network:

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

Перед использованием видео необходимо выполнить начальные операции. Инициализация — вызвать его метод инициализации. Функция этого метода — открыть данный источник данных и загрузить его метаданные.

Поскольку метод инициализации является трудоемкой операцией, тип возвращаемого значения этого метода — Future:

  Future<void> initialize() async {

Мы можем использовать его следующим образом:

late Future<void> playerFuture;
playerFuture = videoPlayerController.initialize();

Что касается будущего игрока, мы можем использовать его с 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 мы определяем, было ли загружено видео, оценивая состояние соединения. Если оно не было загружено, мы используем CircularProgressIndicator, чтобы указать, что оно загружается.

Если загрузка завершена, просто отобразите компонент VideoPlayer напрямую.

Поскольку разные видео имеют разные соотношения сторон, чтобы идеально отображать загруженное видео в интерфейсе flutter, мы инкапсулируем VideoPlayer в компонент AspectRatio.

Наконец, нам нужно добавить устройство управления для управления паузой и воспроизведением видео:

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 используется для определения того, воспроизводится ли видео, а setState вызывается в методе onPressed для вызова метода videoPlayerController.pause или videoPlayerController.play.

Подвести итог

Вот такое приложение, способное воспроизводить внешнее видео, готово. После запуска его интерфейс будет выглядеть так:

Вы можете расширить его на базе этого плеера, и ваше собственное видеоприложение будет завершено.

Примеры из этой статьи：https://github.com/ddean2009/learn-flutter.git