UI 自訂

Media3 提供預設 PlayerView,提供部分自訂選項。如要進一步自訂,應用程式開發人員應實作自己的 UI 元件。

最佳做法

實作連線至 Media3 Player 的媒體 UI (例如 ExoPlayerMediaController 或自訂 Player 實作) 時,建議應用程式採用這些最佳做法,以打造最佳的 UI 體驗。

播放/暫停按鈕

播放和暫停按鈕不會直接對應至單一播放器狀態。舉例來說,即使播放器未暫停,使用者也應能在播放結束或失敗後重新開始播放。

為簡化實作方式,Media3 提供公用程式方法來決定要顯示哪個按鈕 (Util.shouldShowPlayButton),以及處理按鈕點選動作 (Util.handlePlayPauseButtonAction):

Kotlin

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

Java

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

監聽狀態更新

UI 元件需要新增 Player.Listener,以便接收需要對應的 UI 更新的狀態變更。詳情請參閱「監聽播放事件」。

重新整理 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()
    }
  }
})

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();
    }
  }
});

處理可用的指令

一般用途的 UI 元件可能需要與不同 Player 實作項目搭配運作,應檢查可用的播放器指令來顯示或隱藏按鈕,並避免呼叫不支援的方法:

Kotlin

nextButton.isEnabled = player.isCommandAvailable(Player.COMMAND_SEEK_TO_NEXT)

Java

nextButton.setEnabled(player.isCommandAvailable(Player.COMMAND_SEEK_TO_NEXT));