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

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

解説

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

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

「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」のボタンのイメージを作成します。
「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」のボタンのUI要素を、ImageViewとして設置します。
ボタンのクリックに関する処理を追加します。
再生中かどうかで「再生」ボタンと「一時停止」ボタンの表示を切り替える処理を追加します。

実装

プロジェクトを開く

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

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

「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」のボタンの配置としては、以下のようにします。
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerInParent="true"> <ImageView android:id="@+id/imageview_rew_10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:src="@drawable/ic_rew_10"/> <ImageView android:id="@+id/imageview_play" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_play"/> <ImageView android:id="@+id/imageview_pause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_pause" android:visibility="gone"/> <ImageView android:id="@+id/imageview_ff_10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:src="@drawable/ic_ff_10"/> </LinearLayout>

activity_main.xm 全体としては、以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <SurfaceView android:id="@+id/surfaceview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /> </RelativeLayout> <RelativeLayout android:id="@+id/viewgroup_playercontroller" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerInParent="true"> <ImageView android:id="@+id/imageview_rew_10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:src="@drawable/ic_rew_10"/> <ImageView android:id="@+id/imageview_play" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_play"/> <ImageView android:id="@+id/imageview_pause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_pause" android:visibility="gone"/> <ImageView android:id="@+id/imageview_ff_10" 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> </RelativeLayout> </FrameLayout>

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

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

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

「再生」ボタン用のImageViewオブジェクト
「一時停止」ボタン用のImageViewオブジェクト
「10秒前にスキップ」ボタン用のImageViewオブジェクト
「10秒後にスキップ」ボタン用のImageViewオブジェクト

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

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

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { （・・・略・・・） private ImageView m_imageviewPlay; private ImageView m_imageviewPause; private ImageView m_imageviewRew10; private ImageView m_imageviewFF10; （・・・略・・・） @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_main ); // Viewの取得 m_textviewPosition = findViewById( R.id.textview_position ); m_textviewDuration = findViewById( R.id.textview_duration ); m_seekbar = findViewById( R.id.seekbar ); m_viewgroupPlayerController = findViewById( R.id.viewgroup_playercontroller ); m_imageviewPlay = findViewById( R.id.imageview_play ); m_imageviewPause = findViewById( R.id.imageview_pause ); m_imageviewRew10 = findViewById( R.id.imageview_rew_10 ); m_imageviewFF10 = findViewById( R.id.imageview_ff_10 ); // リスナーの設定（・・・略・・・） } （・・・略・・・） }

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

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

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

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

メンバー変数に、「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」のボタンに関するクリックリスナーの定義
onCreate関数にて、定義した「ボタンに関するクリックリスナー」を、「再生」「一時停止」「10秒前にスキップ」「10秒後にスキップ」ボタンのオブジェクトに設定する処理

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { （・・・略・・・） private View.OnClickListener m_onPlayerControllerClickListener = new View.OnClickListener() { @Override public void onClick( View view ) { if( m_imageviewPlay == view ) { m_simpleexoplayer.play(); } else if( m_imageviewPause == view ) { m_simpleexoplayer.pause(); } else if( m_imageviewRew10 == view ) { long lPos = m_simpleexoplayer.getCurrentPosition(); lPos -= 10 * 1000; m_simpleexoplayer.seekTo( lPos ); } else if( m_imageviewFF10 == view ) { long lPos = m_simpleexoplayer.getCurrentPosition(); lPos += 10 * 1000; m_simpleexoplayer.seekTo( lPos ); } } }; （・・・略・・・） @Override protected void onCreate( Bundle savedInstanceState ) { （・・・略・・・） // リスナーの設定 m_seekbar.setOnSeekBarChangeListener( m_onSeekBarChangeListener ); m_imageviewPlay.setOnClickListener( m_onPlayerControllerClickListener ); m_imageviewPause.setOnClickListener( m_onPlayerControllerClickListener ); m_imageviewRew10.setOnClickListener( m_onPlayerControllerClickListener ); m_imageviewFF10.setOnClickListener( m_onPlayerControllerClickListener ); // 動画を再生するビューの取得（・・・略・・・） } （・・・略・・・） }

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

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

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

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

メインアクティビティクラスの末尾に、以下を追加します。
private void updatePlayPauseButton() { if( m_simpleexoplayer.isPlaying() ) { // 再生中(STATE_READY = state && true == playWhenReady) // ⇒ 「Play」非表示、「Pause」表示 m_imageviewPlay.setVisibility( View.GONE ); m_imageviewPause.setVisibility( View.VISIBLE ); } else { // 一時停止中(STATE_READY = state && false == playWhenReady)か、 // 最後まで再生して停止中(STATE_ENDED == state)か、 // 再生抑制中(player.getPlaybackSuppressionReason())か、 // バッファリング中(STATE_ENDED = state)か、 // 再生するメディアが無い(STATE_IDLE)か、 // ⇒ 「Play」表示、「Pause」非表示 m_imageviewPlay.setVisibility( View.VISIBLE ); m_imageviewPause.setVisibility( View.GONE ); } }

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

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

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

メインアクティビティクラスのPlayerリスナーの定義としては、以下のようにします。
private final Player.Listener m_playerlistener = new Player.Listener() { @Override public void onIsPlayingChanged( boolean isPlaying ) { if( isPlaying ) { （・・・略・・・） } // 「再生」「一時停止」ボタンの更新 updatePlayPauseButton(); } };

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

実行

Android端末にて、動作確認。

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

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

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

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

ダウンロード

サンプルコード