開発

【Flutter】Flutterで動画ウィジェット(video_player)を再生し完了したらリプレイボタンを表示する実装の紹介

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

今回紹介するのは前回の続編ということで、まだご覧でないかたは、【Flutter】Flutterで動画ウィジェット(video_player)を使用するをご確認ください。

前回作成した動画を再生するウィジェット、MoviePlayerWidgetに、webなんかでよくある再生終了したらplayボタンを表示して、リプレイ再生可能にする実装を紹介しようと思います。

 

実装すること

リプレイ再生を実装するにあたって行うことは以下の通りです。

  1. イベント監視リスナーの実装
  2. 再生完了状態を保持する
  3. 状態に応じてリプレイボタンの表示

 

MoviePlayerWidgetの修正

前回実装したMoviePlayerWidgetをベースに下記の通り修正をします。

_controller.addListener(_listener);で_controller.value.isPlayingの状態を判断して、再生が完了したら、メンバ変数_isPlayCompleteをtrueにします。

build()で、_isPlayCompleteがfalseだと動画ウィジェットの生成、trueだとリプレイボタンの表示をしております。

 

呼び出し

これは以前と変更ありません。

動画でなく申し訳ないのですが、動画が再生後以下のように再生ボタンが表示され、タップするとリプレイします。

 

まとめ

今回は動画再生完了後リプレイ再生可能にする実装を紹介しました。

これで動画再生としてはいっぱしの機能になったかと思います。

次回は未定です。なにを書こうかしら。

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