ExoPlayer Media3中实现快进退时显示HLS Trick Play缩略图方案

问题（翻译后） #

我正在使用带有#EXT-X-IMAGE-STREAM-INF标签的HLS播放列表，该标签提供每10秒视频帧对应的缩略图。目前在Android平台采用ExoPlayer Media3进行视频流播放，需要实现用户快进或后退播放时显示这些缩略图的功能。请问ExoPlayer Media3是否支持该Trick Play缩略图显示功能的API或方法？若有，请提供实现指导及代码示例。

我的HLS主播放列表数据如下：

#EXTM3U
#EXT-X-STREAM-INF:AVERAGE-BANDWIDTH=820000,BANDWIDTH=1030000,RESOLUTION=1280x720,FRAME-RATE=29.970,CODECS="avc1.4d401f,mp4a.40.2",CLOSED-CAPTIONS=NONE
tracks-v1a1/mono.m3u8?thumbnails=548
#EXT-X-IMAGE-STREAM-INF:BANDWIDTH=10000,RESOLUTION=640x360,CODECS="jpeg",URI="images-640x360/tpl-0-5480-548.m3u8?thumbnails=548"

图片子播放列表images-640x360/tpl-0-5480-548.m3u8的数据如下：

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:1
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-VERSION:7
#EXT-X-IMAGES-ONLY
#EXTINF:10,
#EXT-X-TILES:RESOLUTION=640x360,LAYOUT=1x1,DURATION=10
seg-0-0.hls.jpg
#EXTINF:10,
#EXT-X-TILES:RESOLUTION=640x360,LAYOUT=1x1,DURATION=10
seg-0-10.hls.jpg
#EXTINF:10,
#EXT-X-TILES:RESOLUTION=640x360,LAYOUT=1x1,DURATION=10
seg-0-20.hls.jpg
#EXTINF:10,
#EXT-X-TILES:RESOLUTION=640x360,LAYOUT=1x1,DURATION=10
seg-0-30.hls.jpg
#EXTINF:10,
#EXT-X-TILES:RESOLUTION=640x360,LAYOUT=1x1,DURATION=10
seg-0-40.hls.jpg
#EXTINF:10,
#EXT-X-TILES:RESOLUTION=640x360,LAYOUT=1x1,DURATION=10
seg-0-50.hls.jpg
...
#EXT-X-ENDLIST

核心结论 #

ExoPlayer Media3（版本1.1.0及以上）原生支持HLS标准中的#EXT-X-IMAGE-STREAM-INF和#EXT-X-TILES标签，可直接实现快进/后退时的缩略图显示，无需额外第三方工具。

实现步骤 #

1. 配置依赖 #

确保项目引入Media3的核心、HLS和UI模块，推荐使用1.3.1及以上版本：

dependencies {
    implementation "androidx.media3:media3-exoplayer:1.3.1"
    implementation "androidx.media3:media3-exoplayer-hls:1.3.1"
    implementation "androidx.media3:media3-ui:1.3.1"
}

2. 初始化Player并启用图片轨道 #

创建ExoPlayer实例时，通过DefaultTrackSelector允许加载图片类型的轨道：

import androidx.media3.common.MediaItem
import androidx.media3.common.MimeTypes
import androidx.media3.exoplayer.ExoPlayer
import androidx.media3.exoplayer.hls.HlsMediaSource
import androidx.media3.exoplayer.trackselection.DefaultTrackSelector
import androidx.media3.ui.PlayerView

// 配置TrackSelector，允许选择JPEG图片轨道
val trackSelector = DefaultTrackSelector(context).apply {
    setParameters(
        buildUponParameters()
            .setAllowVideoMimeType(MimeTypes.IMAGE_JPEG)
            .setAllowImageTracks(true)
    )
}

// 创建ExoPlayer实例
val player = ExoPlayer.Builder(context)
    .setTrackSelector(trackSelector)
    .build()

// 绑定到PlayerView
val playerView = findViewById<PlayerView>(R.id.player_view)
playerView.player = player

// 加载HLS媒体源
val mediaSource = HlsMediaSource.Factory(DefaultHttpDataSource.Factory())
    .createMediaSource(MediaItem.fromUri("你的主HLS播放列表URL"))

player.setMediaSource(mediaSource)
player.prepare()

3. 为SeekBar绑定缩略图显示 #

Media3的DefaultTimeBar（即PlayerView中的进度条）支持直接绑定缩略图加载逻辑，拖动时自动匹配对应时间点的缩略图：

import androidx.media3.ui.DefaultTimeBar
import android.graphics.Bitmap

// 获取PlayerView中的进度条
val timeBar = playerView.findViewById<DefaultTimeBar>(androidx.media3.ui.R.id.exo_progress)

// 设置缩略图提供器
timeBar.setThumbnailProvider(object : DefaultTimeBar.ThumbnailProvider {
    override fun getThumbnail(timeMs: Long): Bitmap? {
        // 通过Player获取对应时间点的缩略图
        return player.getThumbnail(timeMs)?.bitmap
    }
})

// 启用缩略图显示
timeBar.setShowThumbnail(true)

关键注意事项 #

• 你的HLS播放列表符合HLS v7标准（#EXT-X-VERSION:7），这是支持图片流的最低版本要求。
• 图片轨道的BANDWIDTH设置为10000，优先级低于主视频流，不会影响正常播放。
• 若需自定义缩略图的大小、显示位置，可通过继承DefaultTimeBar或自定义View实现。

内容的提问来源于stack exchange，提问作者rustin peter