開発

【Flutter】Flutterで動画ウィジェット(video_player)を使用する

こんにちは。スマホアプリをメインに開発しているロッキーカナイです。

今回はFlutterで動画をウィジェットとして扱う方法を紹介します。video_playerプラグインを使用することで簡単に実装可能です。

 

video_playerの導入

このvideo_playerはgoogle製なので品質やアップデート頻度も多く比較的安心して導入できるプラグインかと思います。

まず導入準備としては、iOSはInfo.plistにNSAppTransportSecurityの追加、AndroidはAndroidManifest.xmlにuses-permissionの追加を行います。

詳しくは、こちらを参照ください。

あとは、いつもどおり、pubspec.yamlに追加とflutter pub getで導入完了です。

 

動画ウィジェット MoviePlayerWidgetの作成

MoviePlayerWidgetクラスでは、

  1. 動画をURLから取得
  2. 取得中インジケータを表示する機能
  3. 動画の自動再生

上記を行ってます。

 

ちなみに動画をループ再生する場合は、initStateメソッド内のsuperの呼び出し前で、

を追加することで可能です。

 

呼び出し

これを実行すると以下のような感じになります。(動画でなく申し訳ない)

 

こんな感じで使用することができます。

 

まとめ

このように超簡単に動画ウィジェットを表示することができます。

次回は、今回の続編ということで、MoviePlayerWidgetをコード修正して、webなんかでよくある再生終了したらplayボタンを表示して、再プレイ可能にする実装を紹介しようと思います。

ABOUT ME
ロッキーカナイ
ロッキーカナイ
iOSをメインに、SwiftやObjective-C言語の開発をしてます。趣味は猫と戯れる事、PHPを使ったサイト作成やAndroidの開発もしております。ちなみに名前のロッキーカナイはよく昼飯を食べる所w