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 อาจมีค่าใช้จ่ายสูงและมักมีเหตุการณ์ของผู้เล่นหลายคน
เพื่อหลีกเลี่ยงการรีเฟรช 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 แสดงวิดีโอหรือรูปภาพ โดยทั่วไปจะใช้ตัวยึดตำแหน่ง ภาพชัตเตอร์จนกว่าจะได้เฟรมหรือรูปภาพแรกจริง นอกจากนี้ การเล่นวิดีโอผสมและภาพจำเป็นต้องซ่อนและแสดงมุมมองภาพที่ ช่วงเวลาที่เหมาะสม
รูปแบบทั่วไปในการจัดการการอัปเดตเหล่านี้คือการรับฟัง
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. }