Flutterの動画再生用ライブラリmedia_kitを触ってみた

目 的

• Flutterでローカルストレージの複数の画像、動画ファイルを表示、再生したい。
• Linuxアプリでビルドしたい。

なぜmedia_kitなのか

Flutterの動画再生ライブラリで有名なのはこの２つです。

• video_player
• chewie
  参考サイト：Flutter Gems Top Flutter Video packages
  

ところが、この２つのライブラリ、Linuxはサポートされていません😭

そこで、ライブラリについて調査したところ、media_kitがみつかりました。

まさかのフルプラットホームサポートです。
ぎりぎりバージョンは1以上みたいです。
今回はmedia_kitが使えるかどうか、試してみました。

実行環境

• OS: Ubuntu 22.04LTS
• Flutter: 3.10.4
• Dart: 3.0.3
  • media_kit: 1.0.2

実際にやってみた

最初に必要なパッケージをインストールします。

$ sudo apt install libmpv-dev mpv

次にExampleを動かします。
適当にflutter createして、プロジェクトを作成します。

dependenciesにmedia_kit関連のライブラリを追記します。

pubsec.yml

dependencies:
  media_kit: ^1.0.2
  media_kit_video: ^1.0.2
  media_kit_libs_linux: ^1.0.2 # プラットフォームに合わせて追加

再生できました。
gifなので伝わりませんが、実際は音が出ています。

今回はローカルストレージの動画、静止画を再生したいので、少しコードを変えていきます。

確認用のフリーのコンテンツをダウンロードしました。
動画はHYBRID CREATIVE MOVIE サクラさんの、「飛行機・曲技飛行・編隊（2）」動画をダウンロードしました。
静止画は、いらすとやの艦隊のイラストをダウンロードしました。

Flutterのプロジェクト直下にassetsフォルダを作成し、ダウンロードしたファイルを配置します。

$ cd (path_to_flutter_project)
$ ls assets         
mov_hts-samp010.mp4  senkan_kantai.png

pubsec.ymlに、assetsを登録します。

pubsec.yml

assets:
  - assets/ #assets配下のファイルを全て登録 

サンプルの、MyScreenState内のinitState()を書き換えて、プレイリストを作成します。
assets配下のファイルを登録します。

main.dart

  @override
  void initState() {
    super.initState();
    final playable = Playlist(
      [Media('assets/mov_hts-samp010.mp4'), Media('assets/senkan_kantai.png')],
    );
    player.open(playable);
  }

再生できました。
航空機の編隊飛行の動画から、艦隊の静止画に切り替わりました。

初期状態ではPlaylistModeがnoneに設定されており、最後まで再生されると、自動で止まります。
PlaylistModeは以下の３つあるので、必要に応じて変更が必要です。

1. PlaylistMode.none: End playback once end of the playlist is reached.
2. PlaylistMode.single: Indefinitely loop over the currently playing file in the playlist.
3. PlaylistMode.loop: Loop over the playlist & restart it from beginning once end is reached.
   公式ドキュメントのLoop or repeatに記載があります。

気づき事項

• 静止画の背景透過はされないようです。
  • 上記のgifを見ての通り、灰色の格子模様が表示されます。
• 静止画をプレイリストに入れると、3秒程度で次のMediaに切り替わります。
  • この辺りを制御したい場合はHandle playback eventsを参考にして、イベントを制御する必要がありそうです。
• player.jump(int index)を呼ぶことで、特定のMediaに切り替えることができます。
• controller（再生、音量操作など）の有効・無効は切り替えられないようです。AbsorbPointerを使って、クリック操作を禁止するしかなさそうです。

まとめ

• media_kitライブラリを使用し、静止画及び動画を表示することができました。
• (png透過できない問題を除き、)特に不自由なくローカルストレージの画像、動画ファイルを表示、再生ができました。
• 紙芝居的なものならすぐに作れそうです。