รูปภาพ
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ExoPlayer รองรับรูปแบบรูปภาพต่อไปนี้ ดูวิธีผสานรวมกับไลบรารีภายนอกที่อาจรองรับชุดรูปแบบอื่นได้จากไลบรารีการโหลดรูปภาพ
รูปแบบรูปภาพ |
รองรับ |
หมายเหตุ |
BMP |
ใช่ |
|
GIF |
ไม่ |
ไม่รองรับเครื่องมือแยก |
JPEG |
ใช่ |
|
รูปภาพเคลื่อนไหว JPEG |
ใช่ |
รองรับรูปภาพนิ่งและวิดีโอ |
JPEG Ultra HDR
|
ใช่
|
เปลี่ยนกลับไปใช้ SDR ก่อน Android 14 หรือในจอแสดงผลที่ไม่ใช่ HDR |
PNG |
ใช่ |
|
WebP |
ใช่ |
|
HEIF/HEIC |
ใช่ |
|
รูปภาพเคลื่อนไหว HEIC |
เพียงบางส่วน |
รองรับเฉพาะภาพนิ่ง* |
AVIF (เบสไลน์) |
ใช่ |
ถอดรหัสได้ใน Android 14 ขึ้นไปเท่านั้น |
* คุณดูส่วนวิดีโอของรูปภาพเคลื่อนไหว HEIC ได้โดยใช้ MetadataRetriever และเล่นเป็นไฟล์เดี่ยว
หากต้องการเล่นรูปภาพเป็นส่วนหนึ่งของเพลย์ลิสต์ ให้สร้าง MediaItem
ด้วย URI ของรูปภาพแล้วส่งไปยังโปรแกรมเล่น MediaItem
ต้องมี imageDurationMs
เพื่อระบุระยะเวลาที่รูปภาพควรแสดง
Kotlin
// Create a player instance.
val player = ExoPlayer.Builder(context).build()
// Set the media item to be played with the desired duration.
player.setMediaItem(
MediaItem.Builder().setUri(imageUri).setImageDurationMs(2000).build())
// Prepare the player.
player.prepare()
Java
// Create a player instance.
ExoPlayer player = new ExoPlayer.Builder(context).build();
// Set the media item to be played with the desired duration.
player.setMediaItem(
new MediaItem.Builder().setUri(imageUri).setImageDurationMs(2000).build());
// Prepare the player.
player.prepare();
รูปภาพเคลื่อนไหว
รูปภาพเคลื่อนไหวคือไฟล์ที่รวมภาพนิ่งเข้ากับวิดีโอสั้นๆ
- หากกำหนดระยะเวลาของรูปภาพด้วย
setImageDuration
ระบบจะแสดงรูปภาพเคลื่อนไหวเป็นภาพนิ่งตามระยะเวลาที่ประกาศ
- หากไม่ได้กำหนดระยะเวลาของรูปภาพ ระบบจะเล่นรูปภาพเคลื่อนไหวเป็นวิดีโอ
หากต้องการตัวเลือกการปรับแต่งเพิ่มเติม คุณสามารถสร้าง ProgressiveMediaSource
แล้วส่งไปยังโปรแกรมเล่นโดยตรงแทน MediaItem
Kotlin
// Create a data source factory.
val dataSourceFactory = DefaultHttpDataSource.Factory()
// Create a media item with the image URI and the desired duration.
val mediaItem =
MediaItem.Builder().setUri(imageUri).setImageDurationMs(2000).build()
// Create a progressive media source for this media item.
val mediaSource =
ProgressiveMediaSource.Factory(dataSourceFactory)
.createMediaSource(mediaItem)
// Create a player instance.
val player = ExoPlayer.Builder(context).build()
// Set the media source to be played.
player.setMediaSource(mediaSource)
// Prepare the player.
player.prepare()
Java
// Create a data source factory.
DataSource.Factory dataSourceFactory = new DefaultHttpDataSource.Factory();
// Create a media item with the image URI and the desired duration.
MediaItem mediaItem =
new MediaItem.Builder().setUri(imageUri).setImageDurationMs(2000).build();
// Create a progressive media source for this media item.
MediaSource mediaSource =
new ProgressiveMediaSource.Factory(dataSourceFactory)
.createMediaSource(mediaItem);
// Create a player instance.
ExoPlayer player = new ExoPlayer.Builder(context).build();
// Set the media source to be played.
player.setMediaSource(mediaSource);
// Prepare the player.
player.prepare();
การปรับแต่งการเล่น
ExoPlayer มีวิธีต่างๆ ในการปรับแต่งประสบการณ์การเล่นให้เหมาะกับความต้องการของแอป ดูตัวอย่างได้ที่หน้าการปรับแต่ง
ไลบรารีการโหลดรูปภาพ
รูปภาพมักได้รับการจัดการโดยไลบรารีการโหลดรูปภาพภายนอก เช่น Glide หรือ Coil
การผสานรวมไลบรารีเหล่านี้เข้ากับไปป์ไลน์การเล่นต้องดำเนินการ 3 ขั้นตอนดังนี้
- กำหนด
MediaItem
ที่มีประเภท MIME APPLICATION_EXTERNALLY_LOADED_IMAGE
- ระบุโปรแกรมถอดรหัสรูปภาพเพื่อดึงข้อมูล
Bitmap
จากคลังการโหลดรูปภาพ
- ระบุโปรแกรมโหลดภายนอกเพื่อทริกเกอร์การแคชและการโหลดล่วงหน้า
MediaItem ที่มีประเภท MIME ของรูปภาพที่โหลดจากภายนอก
MediaItem
ที่เพิ่มลงใน Player
ต้องกำหนดประเภท MIME APPLICATION_EXTERNALLY_LOADED_IMAGE
อย่างชัดเจนเพื่อใช้เส้นทางโค้ดของไลบรารีการโหลดรูปภาพ
Kotlin
val mediaItem =
MediaItem.Builder()
.setUri(imageUri)
.setMimeType(MimeTypes.APPLICATION_EXTERNALLY_LOADED_IMAGE)
.build()
Java
MediaItem mediaItem =
new MediaItem.Builder()
.setUri(imageUri)
.setMimeType(MimeTypes.APPLICATION_EXTERNALLY_LOADED_IMAGE)
.build();
ตัวถอดรหัสรูปภาพโดยใช้ไลบรารีการโหลดรูปภาพ
โปรแกรมแสดงผลรูปภาพต้องมี ExternallyLoadedImageDecoder
เพื่อดึงข้อมูล Bitmap
จาก Uri
คุณสามารถระบุตัวถอดรหัสนี้ได้โดยการลบล้าง
DefaultRenderersFactory.getImageDecoderFactory
ตัวอย่างต่อไปนี้ใช้ Glide เพื่อโหลดรูปภาพ
Kotlin
val glideImageDecoderFactory: ImageDecoder.Factory =
ExternallyLoadedImageDecoder.Factory { request: ExternalImageRequest ->
GlideFutures.submit(Glide.with(context).asBitmap().load(request.uri))
}
val player: Player =
ExoPlayer.Builder(context)
.setRenderersFactory(
object : DefaultRenderersFactory(context) {
override fun getImageDecoderFactory(): ImageDecoder.Factory {
return glideImageDecoderFactory
}
}
)
.build()
Java
ImageDecoder.Factory glideImageDecoderFactory =
new ExternallyLoadedImageDecoder.Factory(
request -> GlideFutures.submit(
Glide.with(context).asBitmap().load(request.uri)));
Player player =
new ExoPlayer.Builder(context)
.setRenderersFactory(
new DefaultRenderersFactory(context) {
@Override
protected ImageDecoder.Factory getImageDecoderFactory() {
return glideImageDecoderFactory;
}
})
.build();
การโหลดรูปภาพล่วงหน้าด้วยไลบรารีการโหลดรูปภาพ
ระหว่างการเล่น โปรแกรมเล่นจะขอโหลดรูปภาพถัดไปล่วงหน้าเมื่อโหลดรายการก่อนหน้าในเพลย์ลิสต์จนเต็มแล้ว เมื่อใช้ไลบรารีการโหลดรูปภาพภายนอก คุณต้องระบุ ExternalLoader
เพื่อทริกเกอร์การโหลดล่วงหน้านี้ หากไม่สามารถหรือไม่จำเป็นต้องโหลดล่วงหน้า คุณยังคงต้องระบุตัวโหลดนี้ แต่จะไม่ทําอะไรได้
ตัวอย่างต่อไปนี้ใช้ Glide เพื่อให้ระบบโหลดรูปภาพที่ขอไว้ล่วงหน้าลงในดิสก์
Kotlin
val glidePreloader = ExternalLoader { request: LoadRequest ->
GlideFutures.submit(
Glide.with(context)
.asFile()
.apply(
RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.DATA)
.priority(Priority.HIGH)
.skipMemoryCache(true)
)
.load(request.uri)
)
}
val player =
ExoPlayer.Builder(context)
.setMediaSourceFactory(DefaultMediaSourceFactory(context)
.setExternalImageLoader(glidePreloader))
.build()
Java
ExternalLoader glidePreloader =
request ->
GlideFutures.submit(
Glide.with(context)
.asFile()
.apply(
diskCacheStrategyOf(DiskCacheStrategy.DATA)
.priority(Priority.HIGH)
.skipMemoryCache(true))
.load(request.uri));
Player player =
new ExoPlayer.Builder(context)
.setMediaSourceFactory(new DefaultMediaSourceFactory(context)
.setExternalImageLoader(glidePreloader))
.build();
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-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-07-27 UTC"],[],[],null,["# Images\n\nExoPlayer supports the following image formats. See\n[Image Loading Libraries](/media/media3/exoplayer/images#image-loading-libraries)\nfor how to integrate with external libraries that may provide support for a\ndifferent set of formats.\n\n| Image format | Supported | Notes |\n|-------------------|-----------|------------------------------------------------------------|\n| BMP | YES | |\n| GIF | NO | No Extractor support |\n| JPEG | YES | |\n| JPEG Motion Photo | YES | Still image and video supported |\n| JPEG Ultra HDR | YES | Falls back to SDR before Android 14 or on non-HDR displays |\n| PNG | YES | |\n| WebP | YES | |\n| HEIF/HEIC | YES | |\n| HEIC Motion Photo | Partially | Only still image supported\\* |\n| AVIF (baseline) | YES | Decoded on Android 14+ only |\n\n\\* The video part of HEIC motion photos can be obtained with\n[MetadataRetriever](/media/media3/exoplayer/retrieving-metadata#motion-photos)\nand played as a standalone file.\n\nUsing MediaItem\n---------------\n\nTo play an image as part of a playlist, create a `MediaItem` with the image URI\nand pass it to the player. The `MediaItem` must have a `imageDurationMs` to\nspecify for how long the image should be displayed. \n\n### Kotlin\n\n```kotlin\n// Create a player instance.\nval player = ExoPlayer.Builder(context).build()\n// Set the media item to be played with the desired duration.\nplayer.setMediaItem(\n MediaItem.Builder().setUri(imageUri).setImageDurationMs(2000).build())\n// Prepare the player.\nplayer.prepare()\n```\n\n### Java\n\n```java\n// Create a player instance.\nExoPlayer player = new ExoPlayer.Builder(context).build();\n// Set the media item to be played with the desired duration.\nplayer.setMediaItem(\n new MediaItem.Builder().setUri(imageUri).setImageDurationMs(2000).build());\n// Prepare the player.\nplayer.prepare();\n```\n\n\u003cbr /\u003e\n\n### Motion Photos\n\nMotion photos are files combining a still image with a short video.\n\n- If the image duration is defined with `setImageDuration`, the motion photo is displayed for the declared duration as a still image.\n- If the image duration is undefined, the motion photo is played as a video.\n\nUsing ProgressiveMediaSource\n----------------------------\n\nFor more customization options, you can create a `ProgressiveMediaSource` and\npass it directly to the player instead of a `MediaItem`. \n\n### Kotlin\n\n```kotlin\n// Create a data source factory.\nval dataSourceFactory = DefaultHttpDataSource.Factory()\n// Create a media item with the image URI and the desired duration.\nval mediaItem =\n MediaItem.Builder().setUri(imageUri).setImageDurationMs(2000).build()\n// Create a progressive media source for this media item.\nval mediaSource =\n ProgressiveMediaSource.Factory(dataSourceFactory)\n .createMediaSource(mediaItem)\n// Create a player instance.\nval player = ExoPlayer.Builder(context).build()\n// Set the media source to be played.\nplayer.setMediaSource(mediaSource)\n// Prepare the player.\nplayer.prepare()\n```\n\n### Java\n\n```java\n// Create a data source factory.\nDataSource.Factory dataSourceFactory = new DefaultHttpDataSource.Factory();\n// Create a media item with the image URI and the desired duration.\nMediaItem mediaItem =\n new MediaItem.Builder().setUri(imageUri).setImageDurationMs(2000).build();\n// Create a progressive media source for this media item.\nMediaSource mediaSource =\n new ProgressiveMediaSource.Factory(dataSourceFactory)\n .createMediaSource(mediaItem);\n// Create a player instance.\nExoPlayer player = new ExoPlayer.Builder(context).build();\n// Set the media source to be played.\nplayer.setMediaSource(mediaSource);\n// Prepare the player.\nplayer.prepare();\n```\n\n\u003cbr /\u003e\n\nCustomizing playback\n--------------------\n\nExoPlayer provides multiple ways for you to tailor playback experience to your\napp's needs. See the [Customization page](/guide/topics/media/exoplayer/customization) for examples.\n\nImage Loading Libraries\n-----------------------\n\nImages are often managed by external image loading libraries, for example\n[Glide](https://bumptech.github.io/glide/) or\n[Coil](https://coil-kt.github.io/coil/).\n\nIntegrating these libraries into the playback pipeline requires 3 steps:\n\n1. Define a `MediaItem` with `APPLICATION_EXTERNALLY_LOADED_IMAGE` MIME type.\n2. Provide an image decoder to retrieve a `Bitmap` from the image loading library.\n3. Provide an external loader to trigger caching and preloading.\n\n### MediaItem with externally loaded image MIME type\n\nThe `MediaItem` added to the `Player` must define the\n`APPLICATION_EXTERNALLY_LOADED_IMAGE` MIME type explicitly to use the image\nloading library code paths: \n\n### Kotlin\n\n```kotlin\nval mediaItem =\n MediaItem.Builder()\n .setUri(imageUri)\n .setMimeType(MimeTypes.APPLICATION_EXTERNALLY_LOADED_IMAGE)\n .build()\n```\n\n### Java\n\n```java\nMediaItem mediaItem =\n new MediaItem.Builder()\n .setUri(imageUri)\n .setMimeType(MimeTypes.APPLICATION_EXTERNALLY_LOADED_IMAGE)\n .build();\n```\n\n\u003cbr /\u003e\n\n### Image decoder using an image loading library\n\nThe image renderer needs an `ExternallyLoadedImageDecoder` to retrieve the\n`Bitmap` from the `Uri`. This decoder can be provided by overriding\n`DefaultRenderersFactory.getImageDecoderFactory`.\n\nThe following example uses Glide to load an image: \n\n### Kotlin\n\n```kotlin\nval glideImageDecoderFactory: ImageDecoder.Factory =\n ExternallyLoadedImageDecoder.Factory { request: ExternalImageRequest -\u003e\n GlideFutures.submit(Glide.with(context).asBitmap().load(request.uri))\n }\nval player: Player =\n ExoPlayer.Builder(context)\n .setRenderersFactory(\n object : DefaultRenderersFactory(context) {\n override fun getImageDecoderFactory(): ImageDecoder.Factory {\n return glideImageDecoderFactory\n }\n }\n )\n .build()\n```\n\n### Java\n\n```java\nImageDecoder.Factory glideImageDecoderFactory =\n new ExternallyLoadedImageDecoder.Factory(\n request -\u003e GlideFutures.submit(\n Glide.with(context).asBitmap().load(request.uri)));\nPlayer player =\n new ExoPlayer.Builder(context)\n .setRenderersFactory(\n new DefaultRenderersFactory(context) {\n @Override\n protected ImageDecoder.Factory getImageDecoderFactory() {\n return glideImageDecoderFactory;\n }\n })\n .build();\n```\n\n\u003cbr /\u003e\n\n### Image preloading with an image loading library\n\nDuring playback, the player requests to preload the next image once the previous\nitem in the playlist has fully loaded. When using an external image loading\nlibrary, you must specify an `ExternalLoader` to trigger this preloading. If no\npreloading is possible or required, this loader still needs to be provided, but\ncan do nothing.\n\nThe following example uses Glide to ensure that the requested image is preloaded\nto disk: \n\n### Kotlin\n\n```kotlin\nval glidePreloader = ExternalLoader { request: LoadRequest -\u003e\n GlideFutures.submit(\n Glide.with(context)\n .asFile()\n .apply(\n RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.DATA)\n .priority(Priority.HIGH)\n .skipMemoryCache(true)\n )\n .load(request.uri)\n )\n}\nval player =\n ExoPlayer.Builder(context)\n .setMediaSourceFactory(DefaultMediaSourceFactory(context)\n .setExternalImageLoader(glidePreloader))\n .build()\n```\n\n### Java\n\n```java\nExternalLoader glidePreloader =\n request -\u003e\n GlideFutures.submit(\n Glide.with(context)\n .asFile()\n .apply(\n diskCacheStrategyOf(DiskCacheStrategy.DATA)\n .priority(Priority.HIGH)\n .skipMemoryCache(true))\n .load(request.uri));\nPlayer player =\n new ExoPlayer.Builder(context)\n .setMediaSourceFactory(new DefaultMediaSourceFactory(context)\n .setExternalImageLoader(glidePreloader))\n .build();\n```\n\n\u003cbr /\u003e"]]