เริ่มต้นใช้งาน UI ที่อิงตามมุมมอง
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เพิ่มการอ้างอิง
Kotlin
implementation("androidx.media3:media3-ui:1.8.0")
Groovy
implementation "androidx.media3:media3-ui:1.8.0"
PlayerView
ส่วนประกอบที่สำคัญที่สุดคือ PlayerView
ซึ่งเป็นมุมมองสำหรับการเล่นสื่อ
PlayerView
จะแสดงวิดีโอ รูปภาพ คำบรรยายแทนเสียง และปกอัลบั้มระหว่างการเล่น
รวมถึงตัวควบคุมการเล่น
PlayerView
มีเมธอด setPlayer()
สำหรับการแนบและถอด (โดยการส่ง null
) อินสแตนซ์ Player
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 ที่เกี่ยวข้อง ซึ่ง
สามารถใช้เพื่อปรับแต่งมุมมองในรันไทม์ได้ PlayerView
เอกสารประกอบ
จะแสดงแอตทริบิวต์และเมธอด Setter เหล่านี้โดยละเอียด
หากต้องการให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่สะดวกสบายยิ่งขึ้น โปรดพิจารณาเพิ่มแอตทริบิวต์ keepScreenOn
Android
หรือตั้งค่า Wake Lock หากคุณใช้ ExoPlayer คุณสามารถตรวจสอบการทำงานอื่นๆ ที่ทำให้อุปกรณ์ตื่นอยู่ได้ในหน้างานในเบื้องหลัง
android:keepScreenOn="true"
เมื่อประกาศมุมมองในไฟล์เลย์เอาต์แล้ว คุณจะค้นหามุมมองได้ในเมธอด
onCreate
ของกิจกรรม
Kotlin
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// ...
playerView = findViewById(R.id.player_view)
}
Java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// ...
playerView = findViewById(R.id.player_view);
}
เมื่อเริ่มต้นโปรแกรมเล่นแล้ว คุณจะแนบโปรแกรมเล่นกับมุมมองได้โดยการเรียกใช้
setPlayer
Kotlin
// 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()
Java
// 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();
PlayerControlView
PlayerControlView
เป็นหนึ่งใน View ย่อยของ PlayerView
ซึ่งมีแถบความคืบหน้าและปุ่มควบคุมการเล่น โปรดทราบว่า PlayerControlView
ไม่ได้มีไว้เพื่อใช้เป็นคอมโพเนนต์แบบสแตนด์อโลนภายนอก PlayerView
คุณปรับแต่งได้โดยการตั้งค่าแอตทริบิวต์ใน PlayerView
(ซึ่งจะส่งไปยัง PlayerControlView
) หรือระบุคอนโทรลเลอร์ที่กำหนดเองด้วย android:id="@id/exo_controller
เลือกประเภทแพลตฟอร์ม
แอตทริบิวต์ surface_type
ของ PlayerView
ช่วยให้คุณตั้งค่าประเภทของแพลตฟอร์ม
ที่ใช้สำหรับการเล่นวิดีโอได้ ค่าที่อนุญาตคือ surface_view
, texture_view
,
spherical_gl_surface_view
(ซึ่งเป็นค่าพิเศษสำหรับการเล่นวิดีโอทรงกลม
) video_decoder_gl_surface_view
(ซึ่งใช้สำหรับการแสดงวิดีโอโดยใช้
เครื่องมือแสดงผลส่วนขยาย) และ none
(สำหรับการเล่นเสียงเท่านั้น) ดูข้อมูลเพิ่มเติมเกี่ยวกับ
ประเภท Surface ที่ควรเลือกได้ในหน้า Surface
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-08-27 UTC"],[],[],null,["Add the dependency \n\nKotlin \n\n```kotlin\nimplementation(\"androidx.media3:media3-ui:1.8.0\")\n```\n\nGroovy \n\n```groovy\nimplementation \"androidx.media3:media3-ui:1.8.0\"\n```\n\nPlayerView\n\nThe most important component is [`PlayerView`](/reference/androidx/media3/ui/PlayerView), a view for media playback.\n`PlayerView` displays video, images, subtitles, and album art during playback,\nas well as playback controls.\n\n`PlayerView` has a [`setPlayer()`](/reference/androidx/media3/ui/PlayerView#setPlayer(androidx.media3.common.Player)) method for attaching and detaching (by\npassing `null`) [`Player`](/reference/androidx/media3/common/Player) instances.\n\n`PlayerView` can be used for both video, image and audio playbacks. It renders\nvideo and subtitles in the case of video playback, bitmaps for image playback\nand can display artwork included as metadata in audio files. You can include it\nin your layout files like any other UI component. For example, a `PlayerView`\ncan be included with the following XML: \n\n \u003candroidx.media3.ui.PlayerView\n android:id=\"@+id/player_view\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n app:show_buffering=\"when_playing\"\n app:show_shuffle_button=\"true\"/\u003e\n\nThe snippet above illustrates that `PlayerView` provides several attributes.\nThese attributes can be used to customize the view's behavior, as well as its\nlook and feel. Most of these attributes have corresponding setter methods, which\ncan be used to customize the view at runtime. The `PlayerView` documentation\nlists these attributes and setter methods in more detail.\n\nFor a more comfortable user experience, consider adding the `keepScreenOn` Android\nattribute or [setting a wake lock](/reference/androidx/media3/exoplayer/ExoPlayer#setWakeMode(int)), if you are using ExoPlayer. You can\ninvestigate other actions that keep the device awake in the [background work\npages](/develop/background-work/background-tasks/awake). \n\n android:keepScreenOn=\"true\"\n\nOnce the view is declared in the layout file, it can be looked up in the\n`onCreate` method of the activity: \n\nKotlin \n\n```kotlin\noverride fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n // ...\n playerView = findViewById(R.id.player_view)\n}\n```\n\nJava \n\n```java\n@Override\nprotected void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n // ...\n playerView = findViewById(R.id.player_view);\n}\n```\n\n\u003cbr /\u003e\n\nWhen a player has been initialized, it can be attached to the view by calling\n`setPlayer`: \n\nKotlin \n\n```kotlin\n// Instantiate the player.\nval player = ExoPlayer.Builder(context).build()\n// Attach player to the view.\nplayerView.player = player\n// Set the media item to be played.\nplayer.setMediaItem(mediaItem)\n// Prepare the player.\nplayer.prepare()\n```\n\nJava \n\n```java\n// Instantiate the player.\nplayer = new ExoPlayer.Builder(context).build();\n// Attach player to the view.\nplayerView.setPlayer(player);\n// Set the media item to be played.\nplayer.setMediaItem(mediaItem);\n// Prepare the player.\nplayer.prepare();\n```\n\n\u003cbr /\u003e\n\nPlayerControlView\n\n[`PlayerControlView`](/reference/androidx/media3/ui/PlayerControlView) is one of `PlayerView` sub-Views that contains the\nprogress bar and buttons to control playback. Note that `PlayerControlView` is\nnot intended to be used a standalone component outside of `PlayerView`. It can\nbe customized by setting attributes on `PlayerView` (which will be passed onto\n`PlayerControlView`) or providing a custom controller with\n`android:id=\"@id/exo_controller`.\n\nChoose a surface type\n\nThe `surface_type` attribute of `PlayerView` lets you set the type of surface\nused for video playback. The allowed values are `surface_view`, `texture_view`,\n`spherical_gl_surface_view` (which is a special value for spherical video\nplayback), `video_decoder_gl_surface_view` (which is for video rendering using\nextension renderers) and `none` (for audio playback only). More information on\nwhich surface type to pick can be found [on the Surface page](/media/media3/ui/surface)."]]