Dostosowywanie interfejsu

Media3 udostępnia domyślny element PlayerView, który oferuje pewne opcje dostosowywania.

Zastępowanie elementów rysowalnych

PlayerView używa PlayerControlView do wyświetlania elementów sterujących odtwarzaniem i paska postępu. Elementy rysowalne używane przez PlayerControlView można zastąpić elementami rysowalnymi o tych samych nazwach zdefiniowanymi w aplikacji. Listę elementów rysowanych, które można zastąpić, znajdziesz w dokumentacji PlayerControlView.

W przypadku dalszego dostosowywania deweloperzy aplikacji powinni wdrażać własne komponenty interfejsu. Oto jednak kilka sprawdzonych metod, które pomogą Ci zacząć.

Sprawdzone metody

Podczas wdrażania interfejsu multimediów, który łączy się z biblioteką Media3 Player (np.ExoPlayer MediaController lub niestandardową implementacją Player), zalecamy stosowanie tych sprawdzonych metod, aby zapewnić użytkownikom jak najlepsze wrażenia.

Przycisk odtwarzania/wstrzymywania

Przycisk odtwarzania i wstrzymywania nie odpowiada bezpośrednio jednemu stanowi odtwarzacza. Użytkownik powinien na przykład mieć możliwość ponownego uruchomienia odtwarzania po jego zakończeniu lub niepowodzeniu, nawet jeśli odtwarzacz nie jest wstrzymany.

Aby uprościć implementację, Media3 udostępnia metody narzędziowe, które pozwalają określić, który przycisk ma być wyświetlany (Util.shouldShowPlayButton), i obsługiwać naciśnięcia przycisków (Util.handlePlayPauseButtonAction):

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

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

Nasłuchiwanie aktualizacji stanu

Komponent interfejsu musi dodać Player.Listener, aby otrzymywać informacje o zmianach stanu, które wymagają odpowiedniej aktualizacji interfejsu. Więcej informacji znajdziesz w artykule Słuchanie zdarzeń odtwarzania.

Odświeżanie interfejsu może być kosztowne, a wiele zdarzeń odtwarzacza często pojawia się jednocześnie. Aby uniknąć zbyt częstego odświeżania interfejsu w krótkim czasie, lepiej jest nasłuchiwać tylko onEvents i stamtąd wywoływać aktualizacje interfejsu:

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

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

Obsługa dostępnych poleceń

Ogólny komponent interfejsu, który może wymagać współpracy z różnymi Playerimplementacjami, powinien sprawdzać dostępne polecenia odtwarzacza, aby wyświetlać lub ukrywać przyciski i unikać wywoływania nieobsługiwanych metod:

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

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

Migawka pierwszej klatki i wyświetlanie obrazu

Gdy komponent interfejsu wyświetla film lub obrazy, zwykle używa widoku zastępczego, dopóki nie będzie dostępna pierwsza klatka lub obraz. Dodatkowo odtwarzanie mieszanych treści wideo i obrazów wymaga ukrywania i wyświetlania widoku obrazu w odpowiednich momentach.

Typowym sposobem obsługi tych aktualizacji jest nasłuchiwanie zdarzenia Player.Listener.onEvents() w przypadku zmiany wybranych ścieżek (EVENT_TRACKS_CHANGED) i wyrenderowania pierwszej klatki filmu (EVENT_RENDERED_FIRST_FRAME), a także zdarzenia ImageOutput.onImageAvailable() w przypadku udostępnienia nowego obrazu:

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

@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