UI のカスタマイズ

Media3 には、カスタマイズ オプションが用意されたデフォルトの PlayerView が用意されています。

ドローアブルをオーバーライドする

PlayerView は PlayerControlView を使用して、再生コントロールとプログレスバーを表示します。PlayerControlView で使用されるドローアブルは、アプリケーションで定義されている同じ名前のドローアブルでオーバーライドできます。オーバーライドできるコントロール ドローアブルの一覧については、 PlayerControlView のドキュメントをご覧ください。

さらにカスタマイズする場合は、アプリ デベロッパーが独自の UI コンポーネントを実装する必要があります。ただし、まず始めるにあたって役立つベスト プラクティスをいくつかご紹介します。

ベスト プラクティス

Media3 Player（たとえば ExoPlayer、MediaController、カスタムの Player 実装など）に接続するメディア UI を実装する場合は、最高の UI エクスペリエンスを実現するために、次のベスト プラクティスに沿って行うことをおすすめします。

再生/一時停止ボタン

再生ボタンと一時停止ボタンは、1 つのプレーヤーの状態に直接対応していません。たとえば、プレーヤーが一時停止していなくても、再生が終了または失敗した後に再生を再開できるようにする必要があります。

実装を簡素化するため、Media3 には、表示するボタンを決定するユーティリティ メソッド（Util.shouldShowPlayButton）と、ボタンの押下を処理するユーティリティ メソッド（Util.handlePlayPauseButtonAction）が用意されています。

Kotlin

val shouldShowPlayButton: Boolean = Util.shouldShowPlayButton(player)
playPauseButton.setImageDrawable(if (shouldShowPlayButton) playDrawable else pauseDrawable)
playPauseButton.setOnClickListener { Util.handlePlayPauseButtonAction(player) }
UiCustomization.kt

Java

boolean shouldShowPlayButton = Util.shouldShowPlayButton(player);
playPauseButton.setImageDrawable(shouldShowPlayButton ? playDrawable : pauseDrawable);
playPauseButton.setOnClickListener(view -> Util.handlePlayPauseButtonAction(player));
UiCustomization.java

状態の更新をリッスンする

UI コンポーネントは、対応する UI の更新が必要な状態の変化を通知するために、Player.Listener を追加する必要があります。詳しくは、再生 イベントをリッスンするをご覧ください。

UI の更新はコストがかかる可能性があり、複数のプレーヤー イベントが同時に発生することがよくあります。短期間に UI を頻繁に更新しないようにするには、通常、onEvents のみをリッスンして、そこから UI の更新をトリガーすることをおすすめします。

Kotlin

player.addListener(
  object : Player.Listener {
    override fun onEvents(player: Player, events: Player.Events) {
      if (
        events.containsAny(
          Player.EVENT_PLAY_WHEN_READY_CHANGED,
          Player.EVENT_PLAYBACK_STATE_CHANGED,
          Player.EVENT_PLAYBACK_SUPPRESSION_REASON_CHANGED,
        )
      ) {
        updatePlayPauseButton()
      }
      if (events.containsAny(Player.EVENT_REPEAT_MODE_CHANGED)) {
        updateRepeatModeButton()
      }
    }
  }
)
UiCustomization.kt

Java

player.addListener(
    new Player.Listener() {
      @Override
      public void onEvents(Player player, Player.Events events) {
        if (events.containsAny(
            Player.EVENT_PLAY_WHEN_READY_CHANGED,
            Player.EVENT_PLAYBACK_STATE_CHANGED,
            Player.EVENT_PLAYBACK_SUPPRESSION_REASON_CHANGED)) {
          updatePlayPauseButton();
        }
        if (events.containsAny(Player.EVENT_REPEAT_MODE_CHANGED)) {
          updateRepeatModeButton();
        }
      }
    });
UiCustomization.java

使用可能なコマンドを処理する

さまざまな Player 実装で動作する必要がある汎用 UI コンポーネントは、使用可能なプレーヤー コマンドを確認して、ボタンの表示 / 非表示を切り替え、サポートされていないメソッドの呼び出しを回避する必要があります。

Kotlin

nextButton.isEnabled = player.isCommandAvailable(COMMAND_SEEK_TO_NEXT)
UiCustomization.kt

Java

nextButton.setEnabled(player.isCommandAvailable(COMMAND_SEEK_TO_NEXT));
UiCustomization.java

最初のフレームのシャッターと画像の表示

UI コンポーネントが動画や画像を表示する場合、通常は実際の最初のフレームまたは画像が使用可能になるまで、プレースホルダのシャッター ビューを使用します。また、動画と画像を混在させて再生する場合は、適切なタイミングで画像ビューを非表示にして表示する必要があります。

これらの更新を処理する一般的なパターンは、選択したトラックの変更（EVENT_TRACKS_CHANGED）と最初の動画フレームのレンダリング時（EVENT_RENDERED_FIRST_FRAME）に Player.Listener.onEvents()をリッスンすることと、新しい画像が使用可能になったときにImageOutput.onImageAvailable() をリッスンすることです。

Kotlin

override fun onEvents(player: Player, events: Player.Events) {
  if (events.contains(Player.EVENT_TRACKS_CHANGED)) {
    // If no video or image track: show shutter, hide image view.
    // Otherwise: do nothing to wait for first frame or image.
  }
  if (events.contains(Player.EVENT_RENDERED_FIRST_FRAME)) {
    // Hide shutter, hide image view.
  }
}

override fun onImageAvailable(presentationTimeUs: Long, bitmap: Bitmap) {
  // Show shutter, set image and show image view.
}

UiCustomization.kt

Java

@Override
public void onEvents(Player player, Player.Events events) {
  if (events.contains(Player.EVENT_TRACKS_CHANGED)) {
    // If no video or image track: show shutter, hide image view.
    // Otherwise: do nothing to wait for first frame or image.
  }
  if (events.contains(Player.EVENT_RENDERED_FIRST_FRAME)) {
    // Hide shutter, hide image view.
  }
}

@Override
public void onImageAvailable(long presentationTimeUs, Bitmap bitmap) {
  // Show shutter, set image and show image view.
}

UiCustomization.java