如何在Jetpack Compose中使用Coil加载显示视频缩略图？

Coil原生支持本地视频文件的缩略图提取能力，不需要额外引入独立的视频缩略图加载逻辑，你现有的代码仅需要少量调整即可同时支持图片、视频缩略图加载。

实现步骤 #

1. 依赖确认 #

首先确保你项目中引入的Coil版本符合要求：

• Coil 1.x版本默认已支持本地视频帧提取
• Coil 2.x版本需要确保引入了coil-compose基础依赖即可

2. 现有代码兼容优化 #

你可以直接复用现有的组件逻辑，仅需要在构造rememberImagePainter时添加可选的视频帧配置即可，修改后的代码如下：

@Composable
fun MediaLoaderFromLocal(
    path: String,
    placeHolderResId: Int,
    modifier: Modifier,
    transformation: Transformation,
    // 可选参数：指定提取视频的第几毫秒帧，默认取首帧
    videoFrameMillis: Long = 0
) {
    val painter = rememberImagePainter(
        data = File(path),
        builder = {
            placeholder(placeHolderResId)
            crossfade(true)
            transformations(transformation)
            // 仅对视频文件生效，指定提取的帧位置
            videoFrameMillis(videoFrameMillis)
            // 也可以用按比例取帧，比如取中间帧：videoFramePercent(0.5f)
        }
    )

    Image(
        painter = painter,
        contentDescription = null,
        modifier = modifier,
        contentScale = ContentScale.Inside
    )
}

3. Coil 2.x版本推荐写法 #

如果你使用的是Coil 2.x版本，rememberImagePainter已被弃用，推荐使用AsyncImage组件实现：

@Composable
fun MediaLoaderFromLocal(
    path: String,
    placeHolderResId: Int,
    modifier: Modifier,
    transformation: Transformation,
    videoFrameMillis: Long = 0
) {
    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(File(path))
            .placeholder(placeHolderResId)
            .crossfade(true)
            .transformations(transformation)
            .videoFrameMillis(videoFrameMillis)
            .build(),
        contentDescription = null,
        modifier = modifier,
        contentScale = ContentScale.Inside
    )
}

注意事项 #

• 需要提前申请存储读取权限：Android 12及以下申请READ_EXTERNAL_STORAGE权限，Android 13及以上申请READ_MEDIA_IMAGES、READ_MEDIA_VIDEO权限，否则文件读取失败会一直显示占位图。
• 加载大体积视频时，建议在ImageRequest的builder中添加size(thumbnailWidth, thumbnailHeight)指定缩略图尺寸，减少内存占用提升加载速度。
• 如果需要区分展示图片和视频，可以在传入路径前先判断文件类型，给视频缩略图叠加播放图标等标识即可。

内容的提问来源于stack exchange，提问作者Murodjon Abdukholikov