Load video thumbnail in jetpack compose using coil

Question

I'm using coil 2.2.0 with compose 1.2.1. I've tried below code to load video thumbnail from remote url but it's not working. Any solution?

I've tried below code but it's not working. Any solution?

val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .data(url)
        .fetcherFactory<Any> { data, options, imageLoader ->
            imageLoader.components.newBuilder()
                .add(VideoFrameDecoder.Factory())
                .build()
                .newFetcher(data, options, imageLoader)?.first
        }
        .videoFrameMillis(1000)
        .build(),
)
Image(painter = painter, contentDescription = null)

Try adding a listener to the image request & check the error in `onError` callback. Also check that you have the Internet permission added. — Darshan, Sep 14 '22 at 18:18
Already have all permissions. My video URL does not end with video extension (e.g., .mp4) and Coil does not such URL. That is the issue. — Annon, Sep 14 '22 at 18:25
If the filename does not end with a valid extension, you need to implement a `decoderFactory`, check valid extensions here: https://developer.android.com/guide/topics/media/media-formats#video-formats. Also check this Coil documentation: https://coil-kt.github.io/coil/videos/ — Darshan, Sep 14 '22 at 19:10

score 0 · Answer 1 · answered Jul 13 '23 at 15:58

Maybe this solution could work for you (answered at Coil does not load video frame in Image)

@Composable
fun VideoThumbnail(
    modifier: Modifier = Modifier,
    url: String = "",
) {
    AndroidView(
        modifier = modifier,
        factory = { ImageView(it).loadVideoUrl(url) },
        update = { it.loadVideoUrl(url) }
    )
}

fun ImageView.loadVideoUrl(url: String) = this.apply {
    load(url) {
        decoderFactory { result, options, _ ->
            VideoFrameDecoder(
                result.source,
                options
            )
        }
    }
    scaleType = ImageView.ScaleType.CENTER_CROP
}

Load video thumbnail in jetpack compose using coil

1 Answers1