UI 自訂

Media3 提供預設的 PlayerView，可自訂部分選項。

覆寫可繪項目

PlayerView 會使用 PlayerControlView 顯示播放控制項和進度列。應用程式中定義的同名可繪項目，可以覆寫 PlayerControlView 使用的可繪項目。如要查看可覆寫的控制項可繪項目清單，請參閱PlayerControlView說明文件。

如需進一步自訂，應用程式開發人員應實作自己的 UI 元件。不過，以下列舉幾項最佳做法，可協助您著手操作。

最佳做法

實作連結至 Media3 Player 的媒體使用者介面時 (例如 ExoPlayer、MediaController 或自訂 Player 實作項目)，建議應用程式遵循下列最佳做法，提供最佳使用者介面體驗。

播放/暫停按鈕

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

為簡化實作程序，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));

第一格快門和影像顯示

UI 元件顯示影片或圖片時，通常會使用預留位置快門檢視區塊，直到第一個實際影格或圖片可用為止。此外，混合播放影片和圖片時，必須在適當時間隱藏及顯示圖片檢視畫面。

處理這些更新的常見模式是監聽所選曲目的任何變更 (EVENT_TRACKS_CHANGED) 和第一個影片影格的算繪時間 (EVENT_RENDERED_FIRST_FRAME)，以及 ImageOutput.onImageAvailable() 何時提供新圖片：Player.Listener.onEvents()

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.
}

Java

@Override
public void onEvents(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.
}