Is there a way to play videos in wasmJs?

# compose-web

[carbaj0]

Is there a way to play videos in wasmJs?

[Artem Kobzar]

As far as I know, no, but maybe something changed. @Oleksandr Karpovich [JB] knows better

[Oleksandr Karpovich [JB]]

Do you mean a video player?
There is no such plans within Compose Multiplatform.

[carbaj0]

So far, I've had to use webview to display videos (URLs) in Compose. Don't you think it's a very common use case to have to play videos? Like YouTube or similar? Maybe I'm biased by my need hehe

[Oleksandr Karpovich [JB]]

I agree it's quite a common use case.
But such a componentt doesn't need to be provided out of a box from Compose Multiplatform.
Similarly like Jetpack Compose doesn't have such a component out of a box.

I guess your question was rather to the community here in general. Perhaps someone already implemented a video player for web target

[carbaj0]

I understand, you are right. It was a question more oriented towards finding out if anyone knows about the existence of a component or a way to solve this problem. I think we are still at the beginning of this adventure! hehe

[soufianehamama9]

You can by using this library
https://github.com/Hamamas/Kotlin-Wasm-Html-Interop

[soufianehamama9]

var visibility by remember { mutableStateOf(false) }
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { visibility = visibility.not() }) {
            Text(if (visibility) "Hide video" else "Show video")
        }
        AnimatedVisibility(visibility) {
            HtmlView(
                modifier = Modifier.fillMaxWidth().height(300.dp),
                factory = {
                    val video = document.createElement("video")
                    video.setAttribute(
                        "src",
                        "<http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4|http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4>"
                    )
                    video
                }
            )
        }
    }

[carbaj0]

🙌 very interesting

[Chris Athanas]

I am doing different implementations to play video with my Cloud Cover USA app for iOS, Android and Web :

https://github.com/realityexpander/CloudCoverUSA2

[carbaj0]

Yes, it is one of the projects I have been reviewing 😀. But you don't have the implementation just for wasm.