การปรับแต่ง UI

Media3 มี PlayerView เริ่มต้นที่มีตัวเลือกการปรับแต่งบางอย่าง หากต้องการปรับแต่งเพิ่มเติม นักพัฒนาแอปจะต้องใช้คอมโพเนนต์ UI ของตนเอง

แนวทางปฏิบัติแนะนำ

เมื่อติดตั้งใช้งาน UI สื่อที่เชื่อมต่อกับ Player ของ Media3 (เช่น ExoPlayer, MediaController หรือการติดตั้งใช้งาน 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 อาจทําให้เสียค่าใช้จ่ายและกิจกรรมของผู้เล่นหลายรายการมักจะเกิดขึ้นพร้อมกัน โดยทั่วไปแล้ว คุณควรฟังเฉพาะ onEvents และเรียกให้ UI อัปเดตจากเหตุการณ์ดังกล่าวเพื่อหลีกเลี่ยงการรีเฟรช 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 แสดงวิดีโอหรือรูปภาพ โดยปกติจะใช้ตัวยึดตําแหน่งเพื่อแสดงภาพแทนจนกว่าจะมีเฟรมแรกหรือรูปภาพจริง นอกจากนี้ การเล่นวิดีโอและรูปภาพแบบผสมต้องซ่อนและแสดงมุมมองรูปภาพในเวลาที่เหมาะสม

รูปแบบทั่วไปในการจัดการการอัปเดตเหล่านี้คือการฟัง Player.Listener.onEvents เพื่อดูว่ามีการเปลี่ยนแปลงในแทร็กที่เลือกหรือไม่ (EVENT_TRACKS_CHANGED) และดูว่าเฟรมวิดีโอแรกได้รับการเรนเดอร์แล้วหรือยัง (EVENT_RENDERED_FIRST_FRAME) รวมถึงฟัง 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.
}

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