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

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