03．再生位置を表示できるようにする

再生位置を表示できるようにします。

解説

テキストで、再生位置と動画長さを表示するようにします。
SeekBarで、再生位置を表示するようにします。

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

• 再生位置表示用のUI要素を、TextViewで設置します。
• 動画長さ表示用のUI要素を、TextViewで設置します。
• 再生位置変更用のUI要素を、SeekBarで設置します。
• 設置したUI要素を更新する関数を定義します。
• 設置したUI要素を更新する関数を、定期的に呼び出す処理を実装します。

実装

プロジェクトを開く

「02．動画の縦横比を補正する」で作成したプロジェクトを開きます。

メインアクティビティのレイアウトの編集

メインアクティビティのレイアウトに、以下の変更を加えます。

• 再生位置表示用のUI要素群を、動画再生用のビューに対してオーバーレイ表示するために、ルートレイアウトを「FrameLayout」とします。
• 動画再生用のビュー、再生位置表示用のUI要素群を、それぞれ別の「RelativeLayout」の中に配置します。
• 再生位置表示用のUI要素を、TextViewで設置します。
• 動画長さ表示用のUI要素を、TextViewで設置します。
• 再生位置変更用のUI要素を、SeekBarで設置します。
• UI要素の表示位置が所望の場所に表示されるように、「LinearLayout」等のレイアウトグループを適宜、設置します。

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

activity_main.xml 全体としては、以下のようにします。
<?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:layout_width="match_parent" android:layout_height="match_parent"> <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/textview_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/textview_duration" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#888888" /> </LinearLayout> <SeekBar android:id="@+id/seekbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#888888" android:progressBackgroundTint="#0000FF" android:progressTint="#FF0000" android:thumbTint="#FF00FF"/> </LinearLayout> </RelativeLayout> </FrameLayout>

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

再生位置表示用のビューを取得する処理を追加します。

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

• 再生位置表示用のTextViewオブジェクト
• 動画長さ表示用のTextViewオブジェクト
• 再生位置表示用のSeekBarオブジェクト

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

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

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { （・・・略・・・） private TextView m_textviewPosition; private TextView m_textviewDuration; private SeekBar m_seekbar; （・・・略・・・） @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 ); // 動画を再生するビューの取得 （・・・略・・・） } （・・・略・・・） }

「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 ) { // 動画を再生するビューのサイズの調整 adjustVideoViewSize(); // 動画長さの設定 // 動画の長さは、exoplayer.getDuration()によって、単位がミリ秒で得られる。 long lDurationMilliSec = m_simpleexoplayer.getDuration(); // 動画の長さのテキストは、動画の長さを「MM:SS」形式で設定する。 long lDurationSec = (int)Math.ceil( lDurationMilliSec / 1000 ); long lMM = lDurationSec / 60; long lSS = lDurationSec % 60; m_textviewDuration.setText( String.format( Locale.US, "%02d:%02d", lMM, lSS ) ); // シークバーの最大値は、動画の長さを単位を0.1秒で設定する（100で割って、0.1秒単位に変換）。 m_seekbar.setMax( (int)( lDurationMilliSec / 100 ) ); } } };

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

メインアクティビティクラスの編集（動画位置表示の更新の関数定義）

メインアクティビティクラスに 動画位置の更新の関数の定義を追加します。
動画位置の更新の処理は以下です。

1. 動画の再生位置の取得
2. 動画の再生位置で、再生位置表示用のTextViewオブジェクトのテキストを設定
3. 動画の再生位置で、再生位置表示用のSeekBarオブジェクトのプログレスを設定

メインアクティビティクラスの末尾に、以下を追加します。
// 再生位置表示の更新 private void updateProgress() { // 動画の再生位置は、exoplayer.getCurrentPosition()によって、単位がミリ秒で得られる。 long lPositionMilliSec = m_simpleexoplayer.getCurrentPosition(); // 動画の再生位置のテキストは、動画の再生位置を「MM:SS」形式で設定する。 long lPositionSec = lPositionMilliSec / 1000; long lMM = lPositionSec / 60; long lSS = lPositionSec % 60; m_textviewPosition.setText( String.format( Locale.US, "%02d:%02d", lMM, lSS ) ); // プログレス位置は、動画の再生位置を単位を0.1秒で設定する（100で割って、0.1秒単位に変換）。 m_seekbar.setProgress( (int)( lPositionMilliSec / 100 ) ); }

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

メインアクティビティクラスの編集（再生位置表示の定期更新の開始と停止）

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

• SeekBarを定期的に更新するためのHandlerオブジェクト
• SeekBarを定期的に更新するためのRunnableオブジェクトとRun関数定義

再生位置表示の定期更新の開始と停止の処理を追加します。

1. 「初回表示時、および、ポーズからの復帰時」に呼ばれる関数である onResume 関数に、「再生位置表示の定期更新の開始」処理を記述します。
2. 「アクティビティがフォアグラウンドからバックグラウンドに追いやられた時」に呼ばれる関数である onPause 関数に、「再生位置表示の定期更新の停止」処理を記述します。

メインアクティビティクラス全体としては、以下のようにします。
public class MainActivity extends AppCompatActivity { （・・・略・・・） private Handler m_handlerUpdateProgress = new Handler( Looper.getMainLooper() ); // メインスレッド（＝UIスレッド）で実行させるHandler。 private Runnable m_runnableUpdateProgress = new Runnable() { @Override public void run() { updateProgress(); m_handlerUpdateProgress.postDelayed( this, 100 ); // 100ミリ秒（0.1秒）後に再度実行する } }; private final Player.Listener m_playerlistener = new Player.Listener() （・・・略・・・） // 初回表示時、および、ポーズからの復帰時 @Override protected void onResume() { super.onResume(); // 再生位置表示の定期更新の再開 m_handlerUpdateProgress.postDelayed( m_runnableUpdateProgress, 0 ); if( m_bIsPlayingWhenActivityIsPaused ) { // Activity pause時に動画再生中なら、動画再生再開 m_simpleexoplayer.play(); } } // アクティビティがフォアグラウンドからバックグラウンドに追いやられた時 @Override protected void onPause() { // 動画再生中かどうかの取得と保持 m_bIsPlayingWhenActivityIsPaused = m_simpleexoplayer.isPlaying(); // 動画再生の一時停止 m_simpleexoplayer.pause(); // 再生位置表示の定期更新の停止 m_handlerUpdateProgress.removeCallbacks( m_runnableUpdateProgress ); super.onPause(); } （・・・略・・・） }

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

実行

Android端末にて、動作確認。

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

画面下部に、再生位置テキスト、再生位置バーが表示されます。

ダウンロード

サンプルコード

関連ページ

前項目：02．動画の縦横比を補正する

次項目：04．再生位置を変更できるようにする