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

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



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

解説

UI要素のid名を、ExoPlayerライブラリで定められたid名にすることで、「見た目は自前で作成する。機能はExoPlayerライブラリ内で作成された処理を利用する」ことができます。

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

実装

プロジェクトを開く

02.再生位置の表示と変更をできるようにする」で作成したプロジェクトを開きます。

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秒後にスキップ」のイメージボタンを、ImageViewとして設置します。

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

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



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

メインアクティビティクラスの編集

メインアクティビティの、onCreate関数内の、SimpleExoPlayer作成処理に、スキップ時間の設定処理を追加します。

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

SimpleExoPlayer作成と設定の処理を、以下のようにします。


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


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

実行

Android端末にて、動作確認。

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

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


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


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


「再生」「一時停止」「10秒前スキップ」「10秒後スキップ」のボタン、再生位置テキスト、再生位置バーは、しばらく放っておくと非表示となり、画面をタップすると再表示されます。

ダウンロード

サンプルコード

関連ページ

前項目:02.再生位置の表示、変更をできるようにする

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


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


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