CLOSE

Flutterで動画再生する(全3記事)

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

サイバーエージェントメディア事業部では、スピード感をもって品質の高い実装を行うために、少人数でアプリ開発を行うことを念頭に置きクロスプラットフォームフレームワークの導入を進めています。今回は「Flutter」「Kotlin Multiplatform」を中心に開発の中でのTipsをお話しします。川上氏は、Flutter公式プラグインの「video_prayer」を使った動画再生について発表しました。全3回。1回目は、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が持っているんですが、よしなに再生と停止をしてくれます。

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

(次回へつづく)

続きを読むには会員登録
(無料)が必要です。

会員登録していただくと、すべての記事が制限なく閲覧でき、
著者フォローや記事の保存機能など、便利な機能がご利用いただけます。

無料会員登録

会員の方はこちら

関連タグ:

この記事のスピーカー

同じログの記事

コミュニティ情報

Brand Topics

Brand Topics

  • 孫正義氏が「知のゴールドラッシュ」到来と予測する背景 “24時間自分専用AIエージェント”も2〜3年以内に登場する?

人気の記事

新着イベント

ログミーBusinessに
記事掲載しませんか?

イベント・インタビュー・対談 etc.

“編集しない編集”で、
スピーカーの「意図をそのまま」お届け!