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

Media3 มี PlayerView เริ่มต้นซึ่งมีตัวเลือกการปรับแต่งบางอย่าง

ลบล้างทรัพยากรที่ถอดออกได้

PlayerView ใช้ PlayerControlView เพื่อแสดงตัวควบคุมการเล่นและแถบความคืบหน้า ทรัพยากรที่ถอนออกได้ซึ่ง PlayerControlView ใช้อาจถูกลบล้างโดยทรัพยากรที่ถอนออกได้ซึ่งมีชื่อเดียวกันกับที่กำหนดไว้ในแอปพลิเคชันของคุณ ดูรายการทรัพยากรที่ถอนได้ของตัวควบคุมที่ลบล้างได้ในเอกสารประกอบของ PlayerControlView

หากต้องการปรับแต่งเพิ่มเติม นักพัฒนาแอปจะต้องใช้คอมโพเนนต์ UI ของตนเอง อย่างไรก็ตาม แนวทางปฏิบัติแนะนำต่อไปนี้จะช่วยให้คุณเริ่มต้นใช้งานได้

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

เมื่อติดตั้งใช้งาน UI สื่อที่เชื่อมต่อกับ Player ของ Media3 (เช่น ExoPlayer, MediaController หรือการติดตั้งใช้งาน Player ที่กำหนดเอง) เราขอแนะนำให้แอปทำตามแนวทางปฏิบัติแนะนำต่อไปนี้เพื่อให้ได้รับประสบการณ์การใช้งาน UI ที่ดีที่สุด

ปุ่มเล่น/หยุดชั่วคราว

ปุ่มเล่นและหยุดชั่วคราวไม่สอดคล้องกับสถานะผู้เล่นคนเดียวโดยตรง เช่น ผู้ใช้ควรเริ่มเล่นใหม่ได้หลังจากที่การเล่นสิ้นสุดลงหรือล้มเหลว แม้ว่าโปรแกรมเล่นจะไม่ได้หยุดชั่วคราวก็ตาม

Media3 มีเมธอด util เพื่อช่วยให้การติดตั้งใช้งานง่ายขึ้น โดยจะตัดสินใจว่าจะแสดงปุ่มใด (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(COMMAND_SEEK_TO_NEXT)

Java

nextButton.setEnabled(player.isCommandAvailable(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, 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.
}