ホーム > プログラミング > Android動画再生アプリを作る ( ExoPlayer + SurfaceView ) > 06.一時停止、再開、10秒スキップをできるようにする

06.一時停止、再開、10秒スキップをできるようにする



一時停止、再開、10秒スキップできるようにします。

解説

画面にボタンを配置し、一時停止、再開、10秒スキップできるようにします。

本項で実施している内容は、以下です。

実装

プロジェクトを開く

05.再生コントローラーを非表示にできるようにする」で作成したプロジェクトを開きます。

Vector Assetの追加

「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」のイメージボタンのイメージを作成します。

まず、「再生」のイメージを作成します。

「プロジェクト」ペインの「app > res > drawable」を右クリックします。
右クリックメニュー「New > Vector Asset」を選択します。


「Name」を「ic_play」とします。
「Clip Art」のアイコンをクリックし「play circle outline」を選択します。
「Size」を「64」dp x 「64」dp とします。
「Color」を「00FFFF」とします。
「Next」ボタンを押します。


(何も変更せず)
「Finish」ボタンを押します。
「プロジェクト」ペインの「app > res > drawable」に「ic_play.xml」が出来ます。

「再生」のイメージの作成と同様の方法で、「一時停止」「10秒前にスキップ」「10秒後にスキップ」のイメージを作成します。

「一時停止」のVector Assetの設定

「Name」を「ic_pause」とします。
「Clip Art」のアイコンをクリックし「pause circle outline」を選択します。
「Size」を「64」dp x 「64」dp とします。
「Color」を「00FFFF」とします。

「10秒前にスキップ」のVector Assetの設定

「Name」を「ic_rew_10」とします。
「Clip Art」のアイコンをクリックし「replay 10」を選択します。
「Size」を「64」dp x 「64」dp とします。
「Color」を「00FFFF」とします。

「10秒後にスキップ」のVector Assetの設定

「Name」を「ic_ff_10」とします。
「Clip Art」のアイコンをクリックし「forward 10」を選択します。
「Size」を「64」dp x 「64」dp とします。
「Color」を「00FFFF」とします。

レイアウトの編集

「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」のボタンのUI要素を、ImageViewとして設置します。

「Project」ペインの「app > res > layout > activity_main.xml」を開きます。

activity_main.xml に以下の変更を行います。

「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」のボタンの配置としては、以下のようにします。


activity_main.xm 全体としては、以下のようにします。

メインアクティビティクラスの編集(ビューの取得)

「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」のボタンのビューを取得する処理を追加します。

メインアクティビティクラスの、メンバー変数として、以下を追加します。

メインアクティビティクラスの、onCreate関数に、ビューを取得する処理を追加します。

「Project」ペインの「app > java > ドメイン.アプリ名 > MainActivity」を開きます。

メインアクティビティクラス全体としては、以下のようにします。


「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

メインアクティビティクラスの編集(クリックリスナーの設定)

「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」のボタンのクリックに関する処理を追加します。

メインアクティビティクラスに、以下のコードを追加します。

メインアクティビティクラス全体としては、以下のようにします。


「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

メインアクティビティクラスの編集(「再生」「一時停止」ボタンの更新の関数定義)

「再生」「一時停止」のボタンは、動画を再生しているかによって、どちらか片方を表示し、もう一方は表示しません。
メインアクティビティクラスに 「再生」「一時停止」ボタンの更新の関数の定義を追加します。
「再生」「一時停止」ボタンの更新の関数の処理は以下です。

  1. 動画が再生中のときは、「再生」ボタンは非表示、「一時停止」ボタンは表示
  2. 動画が再生中のときは、「再生」ボタンは表示、「一時停止」ボタンは非表示

メインアクティビティクラスの末尾に、以下を追加します。


「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

メインアクティビティクラスの編集(「再生」「一時停止」ボタンの更新の関数の呼び出し)

メンバー変数として定義された、Playerリスナーに、「再生」「一時停止」ボタンの更新の関数の呼び出し処理を追加します。

メインアクティビティクラスのPlayerリスナーの定義としては、以下のようにします。


「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

実行

Android端末にて、動作確認。

アプリを起動すると、動画が再生、表示されます。

画面中央に、「一時停止」「10秒前スキップ」「10秒後スキップ」のボタンが表示されます。


「一時停止」ボタンを押すと、再生が一時停止します。画面中央のボタンが「再生」ボタンに変わります。「再生」ボタンを押すと、再生が再開します。


「10秒後(前)スキップ」ボタンを押すと、再生位置が10秒進みます(戻ります)。

ダウンロード

サンプルコード

関連ページ

前項目:05.再生コントローラーを非表示にできるようにする

次項目:07.フルスクリーン表示をできるようにする


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.