Flutterのプラグイン「video_player」の使い方　動画再生をサクッといい感じにしてくれる

Flutter公式のプラグイン「video_player」の使い方

川上健太郎氏：『Flutterで動画再生する』というタイトルで川上健太郎が発表します。私は、2018年にサイバーエージェントに入社しました。「FRESH LIVE」「CL」でiOSアプリの開発をして、現在はFlutterで開発中です。Flutter歴はだいたい6ヶ月くらいで、今はAndroidもがんばって勉強しています。

今日の目次です。パッケージの紹介と、「video_player」と、その実装について話します。実際に機能追加するにはどうするのかや、まとめも話します。

まずパッケージの紹介についてです。Flutter公式が出しているvideo_playerというプラグインがあります。サードパーティ製のものがほかにもあるんですが、今のところはたぶんvideo_playerが一番メジャーです。

video_playerはiOS、Android、Webに対応していて、iOSはObjective-C、AndroidはJavaで書かれています。今回はWebについてはあまり触れないんですが、このvideo_playerを実際のプロダクトに導入するにあたって、どんな感じ？　実際どうなの？　をメインに話します。

video_playerの使い方の説明をしたいと思います。ローカルファイル・アセットの再生は簡単で、まずVideoPlayerControllerインスタンスを作ります。そこでassetや、ファイルのパスを指定して、イニシャライズして、playを呼びます。

VideoPlayerウィジェットが用意されているので、それに先ほどのcontrollerを入れるといい感じに再生されます。disposeも忘れないようにしてあげましょう。

次は、リモートファイルの再生です。先ほどとほぼ変わらず、ただ.networkにしてパスを指定するだけです。もちろんHLSも対応しています。Androidは、DASHや、Smooth Streamingなどのフォーマットにも対応しているんですが、Androidのみの対応なので、ほぼ使わないのかなと私は思っています。

「字幕」「シークバー」「ライフサイクル」のウィジェットも用意されている

ほかにできる基本的ことですが、再生、停止、シーク、ループ再生、ボリューム設定、再生速度設定など、動画再生に最低限必要なことはできると思いました。プラスアルファで、video_playerが用意しているウィジェットや便利機能があります。字幕、シークバー、ライフサイクルについてちょっと触れていきたいと思います。

まず字幕についてです。完成状態は右の図なんですが、先ほどとほぼ変わらず、networkでウィジェットvideo_playerをやって、ローカルファイルから字幕ファイルを読み込む関数を処理して、それをVideoPlayerControllerに渡します。

ClosedCaptionというウィジェットが用意されているので、あとはそれ（ClosedCaption）にcontrollerから受け取ったcaptionを渡すだけでいい感じにやってくれます。

ただこの字幕は、現状ローカルファイルからただ読み込むだけなので、ストリームから受け取って表示する標準のものは、別途実装が必要です。

フォーマットは現在マスターでSRT（Secure Reliable Transport）に対応していて、WebVTTに関してはPR（Pull Request）が出ているんですが、1年くらいずっとレビュー中です。時々活発になるんですが、いつマージされるのかわからない状態です。

次に、シークバーについてです。これは簡単で、シークバーのウィジェットを追加するだけでシークバーが表示されます。iOSだとちょっと面倒くさいので、すでに実装してくれているのは便利かなと思います。カスタマイズ性がちょっと低いので使わないのですが、中の実装は参考にできるのかなと思いました。

次は、ライフサイクルに合わせた再生と停止です。プライベートクラスで、VideoAppLifeCycleObserverというWidgetsBindingObserverを継承したラッパーがあります。これはVideoPlayerControllerが持っているんですが、よしなに再生と停止をしてくれます。

ただこれも、自分でハンドリングしたい場合があると思うので、どうなんだろうという感じです。

（次回へつづく）