รูปภาพ

ExoPlayer รองรับรูปแบบรูปภาพต่อไปนี้ โปรดดู ไลบรารีการโหลดรูปภาพ เกี่ยวกับวิธีผสานรวมกับไลบรารีภายนอกที่อาจให้การสนับสนุน รูปแบบต่างๆ กัน

รูปแบบรูปภาพ รองรับ หมายเหตุ
BMP ใช่
GIF ไม่ ไม่รองรับตัวแยก
JPEG ใช่
รูปภาพเคลื่อนไหว JPEG ใช่ รองรับภาพนิ่งและวิดีโอ
JPEG Ultra HDR ใช่ กลับไปใช้ SDR ก่อน Android 14 หรือเวอร์ชันที่ใหม่กว่า จอแสดงผลที่ไม่ใช่ HDR
PNG ใช่
WebP ใช่
HEIF/HEIC ใช่
รูปภาพเคลื่อนไหว HEIC เพียงบางส่วน รองรับเฉพาะภาพนิ่งเท่านั้น*
AVIF (เกณฑ์พื้นฐาน) ใช่ ถอดรหัสใน Android 14 ขึ้นไปเท่านั้น

* ส่วนวิดีโอของภาพเคลื่อนไหว HEIC จะรับได้ด้วย MetadataRetriever และเล่นเป็นไฟล์แบบสแตนด์อโลน

การใช้ MediaItem

หากต้องการเล่นรูปภาพเพื่อเป็นส่วนหนึ่งของเพลย์ลิสต์ ให้สร้าง 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

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

ไลบรารีการโหลดรูปภาพ

รูปภาพมักจะได้รับการจัดการโดยไลบรารีการโหลดรูปภาพภายนอก เช่น แบบเลื่อนผ่าน หรือ ขดลวด

การผสานรวมไลบรารีเหล่านี้กับไปป์ไลน์การเล่นมี 3 ขั้นตอนดังนี้

  1. กำหนด MediaItem ด้วยประเภท MIME APPLICATION_EXTERNALLY_LOADED_IMAGE
  2. ระบุตัวถอดรหัสรูปภาพเพื่อเรียก Bitmap จากการโหลดรูปภาพ ไลบรารี
  3. มีตัวโหลดภายนอกเพื่อทริกเกอร์การแคชและการโหลดล่วงหน้า

MediaItem ที่มีประเภท MIME ของรูปภาพที่โหลดภายนอก

MediaItem ที่เพิ่มลงใน Player ต้องกำหนด APPLICATION_EXTERNALLY_LOADED_IMAGE ประเภท MIME อย่างชัดเจนเพื่อใช้รูปภาพ กำลังโหลดเส้นทางโค้ดไลบรารี:

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();

ตัวถอดรหัสรูปภาพโดยใช้ไลบรารีการโหลดรูปภาพ

ImageRenderer ใช้อินสแตนซ์ ImageDecoder เพื่อดึงข้อมูล Bitmap สำหรับ URI รูปภาพ ระบบเขียนตัวถอดรหัสนี้เพื่อใช้การโหลดรูปภาพภายนอกได้ ตามที่แสดงในตัวอย่างต่อไปนี้ด้วยการเลื่อน

Kotlin

val glideImageDecoder: ImageDecoder =
  object : ImageDecoder {
    private val inputBuffer =
      DecoderInputBuffer(DecoderInputBuffer.BUFFER_REPLACEMENT_MODE_NORMAL)
    private val outputBuffer: ImageOutputBuffer =
      object : ImageOutputBuffer() {
        override fun release() {
          clear()
          bitmap = null
        }
      }
    private var pendingDecode: AtomicBoolean? = null
    private var decodeError: ImageDecoderException? = null

    override fun dequeueInputBuffer(): DecoderInputBuffer? {
      return if (pendingDecode == null) inputBuffer else null
    }

    override fun queueInputBuffer(inputBuffer: DecoderInputBuffer) {
      if (inputBuffer.isEndOfStream) {
        outputBuffer.addFlag(C.BUFFER_FLAG_END_OF_STREAM)
        inputBuffer.clear()
        return
      }
      val currentDecode = AtomicBoolean(true)
      pendingDecode = currentDecode
      val imageUri =
        Uri.parse(
          String(
            inputBuffer.data!!.array(),
            inputBuffer.data!!.position(),
            inputBuffer.data!!.limit() - inputBuffer.data!!.position(),
            Charsets.UTF_8,
          )
        )
      val imageTimeUs = inputBuffer.timeUs
      Glide.with(context)
        .asBitmap()
        .load(imageUri)
        .into(
          object : CustomTarget<Bitmap?>() {
            override fun onResourceReady(
              resource: Bitmap,
              transition: Transition<in Bitmap?>?,
            ) {
              if (currentDecode.get()) {
                outputBuffer.timeUs = imageTimeUs
                outputBuffer.bitmap = resource
                pendingDecode = null
              }
            }

            override fun onLoadFailed(errorDrawable: Drawable?) {
              if (currentDecode.get()) {
                decodeError = ImageDecoderException("Glide load failed")
              }
            }

            override fun onLoadCleared(placeholder: Drawable?) {}
          }
        )
      inputBuffer.clear()
    }

    @Throws(ImageDecoderException::class)
    override fun dequeueOutputBuffer(): ImageOutputBuffer? {
      if (decodeError != null) {
        throw decodeError as ImageDecoderException
      }
      val hasOutput =
        (pendingDecode == null
          && (outputBuffer.bitmap != null || outputBuffer.isEndOfStream))
      return if (hasOutput) outputBuffer else null
    }

    override fun getName(): String {
      return "glideDecoder"
    }

    override fun setOutputStartTimeUs(outputStartTimeUs: Long) {}

    override fun flush() {
      if (pendingDecode != null) {
        pendingDecode!!.set(false)
        pendingDecode = null
      }
      decodeError = null
      inputBuffer.clear()
      outputBuffer.release()
    }

    override fun release() {
      flush()
    }
}
val glideImageDecoderFactory: ImageDecoder.Factory =
  object : ImageDecoder.Factory {
    override fun supportsFormat(format: Format):
        @RendererCapabilities.Capabilities Int {
      val isExternalImageUrl =
        format.sampleMimeType != null &&
          format.sampleMimeType == MimeTypes.APPLICATION_EXTERNALLY_LOADED_IMAGE
      return RendererCapabilities.create(
        if (isExternalImageUrl) C.FORMAT_HANDLED else C.FORMAT_UNSUPPORTED_TYPE
      )
    }

    override fun createImageDecoder(): ImageDecoder {
      return glideImageDecoder
    }
  }
val player: Player =
  ExoPlayer.Builder(context)
    .setRenderersFactory(
      object : DefaultRenderersFactory(context) {
        override fun buildImageRenderers(out: ArrayList<Renderer>) {
          out.add(
            ImageRenderer(glideImageDecoderFactory, /* imageOutput= */ null))
        }
      }
    )
  .build()

Java

ImageDecoder glideImageDecoder =
    new ImageDecoder() {
      private final DecoderInputBuffer inputBuffer =
          new DecoderInputBuffer(BUFFER_REPLACEMENT_MODE_NORMAL);
      private final ImageOutputBuffer outputBuffer =
          new ImageOutputBuffer() {
            @Override
            public void release() {
              clear();
              bitmap = null;
            }
          };
      @Nullable private AtomicBoolean pendingDecode;
      @Nullable private ImageDecoderException decodeError;

      @Nullable
      @Override
      public DecoderInputBuffer dequeueInputBuffer() {
        return pendingDecode == null ? inputBuffer : null;
      }

      @Override
      public void queueInputBuffer(DecoderInputBuffer inputBuffer) {
        if (inputBuffer.isEndOfStream()) {
          outputBuffer.addFlag(C.BUFFER_FLAG_END_OF_STREAM);
          inputBuffer.clear();
          return;
        }
        AtomicBoolean currentDecode = new AtomicBoolean(true);
        pendingDecode = currentDecode;
        Uri imageUri =
            Uri.parse(
                new String(
                    inputBuffer.data.array(),
                    inputBuffer.data.position(),
                    inputBuffer.data.limit() - inputBuffer.data.position(),
                    Charsets.UTF_8));
        long imageTimeUs = inputBuffer.timeUs;
        Glide.with(context)
            .asBitmap()
            .load(imageUri)
            .into(
                new CustomTarget<Bitmap>() {
                  @Override
                  public void onResourceReady(
                      Bitmap resource,
                      @Nullable Transition<? super Bitmap> transition) {
                    if (currentDecode.get()) {
                      outputBuffer.timeUs = imageTimeUs;
                      outputBuffer.bitmap = resource;
                      pendingDecode = null;
                    }
                  }

                  @Override
                  public void onLoadFailed(@Nullable Drawable errorDrawable) {
                    if (currentDecode.get()) {
                      decodeError =
                          new ImageDecoderException("Glide load failed");
                    }
                  }

                  @Override
                  public void onLoadCleared(@Nullable Drawable placeholder) {}
                });
        inputBuffer.clear();
      }

      @Nullable
      @Override
      public ImageOutputBuffer dequeueOutputBuffer()
            throws ImageDecoderException {
        if (decodeError != null) {
          throw decodeError;
        }
        boolean hasOutput =
            pendingDecode == null
              && (outputBuffer.bitmap != null || outputBuffer.isEndOfStream());
        return hasOutput ? outputBuffer : null;
      }

      @Override
      public String getName() {
        return "glideDecoder";
      }

      @Override
      public void setOutputStartTimeUs(long outputStartTimeUs) {}

      @Override
      public void flush() {
        if (pendingDecode != null) {
          pendingDecode.set(false);
          pendingDecode = null;
        }
        decodeError = null;
        inputBuffer.clear();
        outputBuffer.release();
      }

      @Override
      public void release() {
        flush();
      }
    };
ImageDecoder.Factory glideImageDecoderFactory =
    new ImageDecoder.Factory() {
      @Override
      public @RendererCapabilities.Capabilities int supportsFormat(
          Format format) {
        boolean isExternalImageUrl =
            format.sampleMimeType != null
                && format.sampleMimeType.equals(
                    MimeTypes.APPLICATION_EXTERNALLY_LOADED_IMAGE);
        return RendererCapabilities.create(
            isExternalImageUrl ? C.FORMAT_HANDLED : C.FORMAT_UNSUPPORTED_TYPE);
      }

      @Override
      public ImageDecoder createImageDecoder() {
        return glideImageDecoder;
      }
    };
Player player =
    new ExoPlayer.Builder(context)
        .setRenderersFactory(
            new DefaultRenderersFactory(context) {
              @Override
              protected void buildImageRenderers(ArrayList<Renderer> out) {
                out.add(
                    new ImageRenderer(
                        glideImageDecoderFactory, /* imageOutput= */ null));
              }
            })
        .build();

การโหลดรูปภาพล่วงหน้าด้วยไลบรารีการโหลดรูปภาพ

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

ตัวอย่างต่อไปนี้ใช้การเลื่อนเพื่อตรวจสอบว่ามีการโหลดรูปภาพที่ขอไว้ล่วงหน้า ลงในดิสก์:

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)
  )
}

Java

ExternalLoader glidePreloader =
    request ->
        GlideFutures.submit(
            Glide.with(context)
                .asFile()
                .apply(
                    diskCacheStrategyOf(DiskCacheStrategy.DATA)
                        .priority(Priority.HIGH)
                        .skipMemoryCache(true))
                .load(request.uri));