如何在Jetpack Compose中使用Coil显示手机本地视频缩略图

1. 确认依赖配置 #

首先确保在Module级别的build.gradle中引入Coil的视频扩展库（使用最新稳定版本）：

implementation("io.coil-kt:coil-video:2.5.0")

2. 全局配置ImageLoader #

不要在单个请求中单独配置解码器，建议在App全局初始化ImageLoader并添加视频帧解码支持：

// 自定义Application类中初始化
class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        ImageLoader.Builder(this)
            .components {
                add(VideoFrameDecoder.Factory())
            }
            .build()
            .also { ImageLoaderHolder.instance = it }
    }
}

// 用单例保存全局ImageLoader
object ImageLoaderHolder {
    lateinit var instance: ImageLoader
}

或者在Compose根节点通过LocalImageLoader提供全局配置：

CompositionLocalProvider(
    LocalImageLoader provides ImageLoader.Builder(LocalContext.current)
        .components { add(VideoFrameDecoder.Factory()) }
        .build()
) {
    // 你的Compose页面内容
}

3. 简化缩略图加载代码 #

全局配置完成后，请求代码无需自定义fetcherFactory，直接使用简化写法：

val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .data(videoUri)
        .videoFrameMillis(1000) // 指定截取视频1秒处的帧作为缩略图
        .build(),
    imageLoader = ImageLoaderHolder.instance // 或使用LocalImageLoader.current
)

Image(
    painter = painter,
    contentDescription = "视频缩略图",
    contentScale = ContentScale.Crop,
    modifier = Modifier.size(48.dp)
)

4. 权限检查 #

确保已获取对应存储权限：

• Android 12及以下：需要READ_EXTERNAL_STORAGE权限，需在Manifest声明并动态申请
• Android 13及以上：需要READ_MEDIA_VIDEO权限，同样需动态申请

5. 验证视频URI有效性 #

打印生成的videoUri确认格式正确（如content://media/external/video/media/123），可通过以下代码测试URI是否可访问：

val contentResolver = LocalContext.current.contentResolver
try {
    contentResolver.openInputStream(videoUri)?.use {
        // 能打开输入流说明URI有效且有权限
    }
} catch (e: Exception) {
    Log.e("VideoThumbnail", "URI无效或无访问权限", e)
}

6. 添加错误监听排查问题 #

在ImageRequest中添加监听，捕获加载失败的具体原因：

ImageRequest.Builder(LocalContext.current)
    .data(videoUri)
    .videoFrameMillis(1000)
    .listener(
        onError = { _, throwable ->
            Log.e("VideoThumbnail", "缩略图加载失败", throwable)
        }
    )
    .build()

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