เพิ่มตัวควบคุมการเล่นลงในแอป

แอปที่เล่นสื่อต้องใช้คอมโพเนนต์อินเทอร์เฟซผู้ใช้สำหรับแสดงสื่อและควบคุมการเล่น ไลบรารี Media3 มีโมดูล UI ที่มีคอมโพเนนต์ UI หลายรายการ หากต้องการใช้โมดูล UI ให้เพิ่มข้อกําหนดต่อไปนี้

implementation("androidx.media3:media3-ui:1.4.1")

implementation "androidx.media3:media3-ui:1.4.1"

องค์ประกอบที่สําคัญที่สุดคือ PlayerView ซึ่งเป็นมุมมองสําหรับการเล่นสื่อ PlayerView จะแสดงวิดีโอ รูปภาพ คำบรรยาย และหน้าปกอัลบั้มระหว่างการเล่น รวมถึงตัวควบคุมการเล่น

PlayerView มีเมธอด setPlayer สำหรับแนบและถอด (โดยส่ง null) อินสแตนซ์ของโปรแกรมเล่น

PlayerView

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

<androidx.media3.ui.PlayerView
    android:id="@+id/player_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:show_buffering="when_playing"
    app:show_shuffle_button="true"/>

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

เมื่อประกาศมุมมองในไฟล์เลย์เอาต์แล้ว คุณจะค้นหามุมมองนั้นในonCreateเมธอดของกิจกรรมได้ ดังนี้

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  // ...
  playerView = findViewById(R.id.player_view)
}

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  // ...
  playerView = findViewById(R.id.player_view);
}

เมื่อเริ่มต้นโปรแกรมเล่นแล้ว คุณสามารถแนบโปรแกรมเล่นกับมุมมองได้โดยเรียกใช้setPlayer

// Instantiate the player.
val player = ExoPlayer.Builder(context).build()
// Attach player to the view.
playerView.player = player
// Set the media item to be played.
player.setMediaItem(mediaItem)
// Prepare the player.
player.prepare()

// Instantiate the player.
player = new ExoPlayer.Builder(context).build();
// Attach player to the view.
playerView.setPlayer(player);
// Set the media item to be played.
player.setMediaItem(mediaItem);
// Prepare the player.
player.prepare();

เลือกประเภทพื้นผิว

แอตทริบิวต์ surface_type ของ PlayerView ให้คุณตั้งค่าประเภทพื้นผิวที่ใช้สำหรับการเล่นวิดีโอได้ นอกจากค่า spherical_gl_surface_view (ซึ่งเป็นค่าพิเศษสำหรับการเล่นวิดีโอทรงกลม) และ video_decoder_gl_surface_view (สำหรับการแสดงผลวิดีโอโดยใช้โปรแกรมแสดงผลส่วนขยาย) แล้ว ค่าที่อนุญาตคือ surface_view, texture_view และ none หากมุมมองมีไว้สำหรับการเล่นเสียงเท่านั้น ให้ใช้ none เพื่อหลีกเลี่ยงการสร้างพื้นผิว เนื่องจากการสร้างพื้นผิวอาจทำให้สิ้นเปลือง

หากมุมมองมีไว้สำหรับการเล่นวิดีโอปกติ คุณควรใช้ surface_view หรือ texture_view SurfaceView มีประโยชน์หลายประการเหนือกว่า TextureView สำหรับการเล่นวิดีโอ ดังนี้

• การใช้พลังงานต่ำลงอย่างมากในอุปกรณ์หลายรุ่น
• การจับเวลาเฟรมแม่นยำมากขึ้น ทำให้การเล่นวิดีโอลื่นไหลขึ้น
• รองรับเอาต์พุตวิดีโอ HDR คุณภาพสูงขึ้นในอุปกรณ์ที่พร้อมใช้งาน
• รองรับเอาต์พุตที่ปลอดภัยเมื่อเล่นเนื้อหาที่ป้องกันด้วย DRM
• ความสามารถในการแสดงผลเนื้อหาวิดีโอที่ความละเอียดเต็มของการแสดงผลในอุปกรณ์ Android TV ที่เพิ่มระดับ UI ให้สูงขึ้น

ดังนั้น คุณควรเลือกใช้ SurfaceView แทน TextureView หากเป็นไปได้ คุณควรใช้ TextureView เฉพาะในกรณีที่ SurfaceView ไม่ตรงกับความต้องการของคุณ ตัวอย่างหนึ่งคือกรณีที่ต้องใช้ภาพเคลื่อนไหวหรือการเลื่อนที่ราบรื่นของแพลตฟอร์มวิดีโอก่อน Android 7.0 (API ระดับ 24) ตามที่อธิบายไว้ในหมายเหตุต่อไปนี้ สำหรับกรณีนี้ เราขอแนะนำให้ใช้ TextureView เฉพาะในกรณีที่ SDK_INT น้อยกว่า 24 (Android 7.0) และ SurfaceView ในกรณีอื่นๆ

การนำทางด้วย D-pad บน Android TV

รีโมตคอนโทรลของ Android TV มีการควบคุมด้วยปุ่ม D-pad ที่ส่งคําสั่งซึ่งจะมาถึงเป็นเหตุการณ์สําคัญที่ dispatchKeyEvent(KeyEvent) ของ Activity คุณต้องมอบสิทธิ์ต่อไปนี้ให้กับมุมมองโปรแกรมเล่น

override fun dispatchKeyEvent(event: KeyEvent?): Boolean{
  return playerView.dispatchKeyEvent(event!!) || super.dispatchKeyEvent(event)
}

@Override
public boolean dispatchKeyEvent(KeyEvent event) {
  return playerView.dispatchKeyEvent(event) || super.dispatchKeyEvent(event);
}

การขอโฟกัสสำหรับมุมมองโปรแกรมเล่นเป็นสิ่งสำคัญสำหรับการไปยังส่วนต่างๆ ของการควบคุมการเล่นและการข้ามโฆษณา โปรดพิจารณาขอให้มุ่งเน้นในonCreate จาก Activity ข้อต่อไปนี้

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  // ...
  playerView.requestFocus()
  // ...
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...
    playerView.requestFocus();
    // ...
}

หากใช้ Compose ใน Android TV คุณต้องทำให้ AndroidView มุ่งเน้นได้และมอบสิทธิ์เหตุการณ์โดยส่งพารามิเตอร์ตัวแก้ไขไปยัง AndroidView ดังนี้

AndroidView(
  modifier = modifier
    .focusable()
    .onKeyEvent { playerView.dispatchKeyEvent(it.nativeKeyEvent) },
  factory = { playerView }
)

ลบล้างเนื้อหาที่ถอนออกได้

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

การปรับแต่งเพิ่มเติม

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