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

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

解説

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

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

「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」のボタンのイメージを作成します。
「再生」ボタンのUI要素を、ImageViewで設置し、id名を「exo_play」とします。
「一時停止」ボタンのUI要素を、ImageViewで設置し、id名を「exo_pause」とします。
「10秒前にスキップ」ボタンのUI要素を、ImageViewで設置し、id名を「exo_rew」とします。
「10秒後にスキップ」ボタンのUI要素を、ImageViewで設置し、id名を「exo_ffwd」とします。
スキップボタンのスキップ時間として10秒を設定します。

実装

プロジェクトを開く

「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 に以下の変更を行います。

「再生」ボタンのUI要素を、ImageViewで設置し、id名を「exo_play」とします。
「一時停止」ボタンのUI要素を、ImageViewで設置し、id名を「exo_pause」とします。
「10秒前にスキップ」ボタンのUI要素を、ImageViewで設置し、id名を「exo_rew」とします。
「10秒後にスキップ」ボタンのUI要素を、ImageViewで設置し、id名を「exo_ffwd」とします。
UI要素の表示位置が所望の場所に表示されるように、「LinearLayout」等のレイアウトグループを適宜、設置します。

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerInParent="true"> <ImageView android:id="@+id/exo_rew" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:src="@drawable/ic_rew_10"/> <ImageView android:id="@+id/exo_play" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_play"/> <ImageView android:id="@+id/exo_pause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_pause" android:visibility="gone"/> <ImageView android:id="@+id/exo_ffwd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:src="@drawable/ic_ff_10"/> </LinearLayout>

custom_controller.xml 全体としては、以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerInParent="true"> <ImageView android:id="@+id/exo_rew" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:src="@drawable/ic_rew_10"/> <ImageView android:id="@+id/exo_play" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_play"/> <ImageView android:id="@+id/exo_pause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_pause" android:visibility="gone"/> <ImageView android:id="@+id/exo_ffwd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:src="@drawable/ic_ff_10"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_alignParentBottom="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="bottom" android:orientation="horizontal" android:padding="8dp"> <TextView android:id="@+id/exo_position" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#888888" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" / " android:textColor="#888888" /> <TextView android:id="@+id/exo_duration" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#888888" /> </LinearLayout> <com.google.android.exoplayer2.ui.DefaultTimeBar android:id="@+id/exo_progress" android:layout_width="match_parent" android:layout_height="wrap_content" app:played_color="#FF0000" app:buffered_color="#00FF00" app:unplayed_color="#0000FF" app:scrubber_color="#FF00FF"/> </LinearLayout> </RelativeLayout>

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

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

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

SimpleExoPlayer作成と設定の処理を、以下のようにします。
// SimpleExoPlayerの作成と設定 SimpleExoPlayer.Builder playerbuilder = new SimpleExoPlayer.Builder( this ); playerbuilder.setSeekBackIncrementMs( 10000 ); // SeekBack 10s playerbuilder.setSeekForwardIncrementMs( 10000 ); // SeekForward 10s m_simpleexoplayer = playerbuilder.build();

メインアクティビティの、onCreate関数全体としては、以下のようにします。
@Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // 動画を再生するビューの取得 m_playerview = findViewById( R.id.playerview ); // SimpleExoPlayerの作成と設定 SimpleExoPlayer.Builder playerbuilder = new SimpleExoPlayer.Builder( this ); playerbuilder.setSeekBackIncrementMs( 10000 ); // SeekBack 10s playerbuilder.setSeekForwardIncrementMs( 10000 ); // SeekForward 10s m_simpleexoplayer = playerbuilder.build(); // 動画を再生するビューとSimpleExoPlayerの紐づけ m_playerview.setPlayer( m_simpleexoplayer ); // MediaItemの作成とSimpleExoPlayerへのセット Uri uriVideo = Uri.parse( m_strUri ); m_simpleexoplayer.setMediaItem( MediaItem.fromUri( uriVideo ) ); // 再生の準備 m_simpleexoplayer.prepare(); // 再生の開始 m_simpleexoplayer.play(); }

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

実行

Android端末にて、動作確認。

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

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

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

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

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

ダウンロード

サンプルコード