Hi folks, is there a way to play videos in a compo...

# compose-web

[Stefano Milani]

Hi folks, is there a way to play videos in a compose web (Wasm) project? ... like Media 3 (ExoPlayer) or similar

[bod]

I know this lib exists: https://github.com/kdroidFilter/ComposeMediaPlayer

and here's a sample: https://kdroidfilter.github.io/ComposeMediaPlayer/sample/

But I haven't tried it.

[Stefano Milani]

@bod Thanks but there is no implementation for the web side, is only for desktop and android

[bod]

but the sample I linked to runs in the browser

[Stefano Milani]

@bod Woaow, it's true, I read only the first link because generally is intended for Android, iOS and Desktop, is missing into the documentation that is for web too, great! Thanks a lot, I will try

[Chrimaeon]

it’s compose html and not compose web

[Stefano Milani]

@Chrimaeon so it will not works for compose web?

[Chrimaeon]

Nope

[Stefano Milani]

so, no solutions at the moment for a video player?

[Chrimaeon]

🤷‍♂️ Search in klibs.io

[אליהו הדס]

No it's compose web

[אליהו הדס]

it's my library

[אליהו הדס]

I haven't published the update to maven with wasm support yet

[Stefano Milani]

great work, thanks a lot but when you think will be available please?

[אליהו הדס]

I hesitate to publish it because you can't overlay elements on the video.

[Stefano Milani]

@אליהו הדס Do you mean there is no way to lock it in a Box with custom width and height? 🤔

[אליהו הדס]

@Stefano Milani no, for that it's fine

[אליהו הדס]

If you want to overlay another composable like a pause button on the video surface it won't work

[Stefano Milani]

@אליהו הדס but with video you can customize the properties in a different way, I mean just control it in another way... Are you working around this problem? Can we use it and try to adjust the pause or related buttons with others controls like hovered by modifier?

[Rok Oblak]

Please upvote this issue to get a better way of handling embedded HTML (including overlays).

@Stefano Milani I guess the workaround for now is to use HTML for the overlays (i.e. controls) as well

[Skaldebane]

@אליהו הדס I'm wondering if this would be possible by... doing the opposite?

i.e. instead of overlaying the video, put it behind the Compose canvas instead, and then paint the area where it should be with a BlendMode.Clear (which will create a hole in the canvas)...

Never tried this before, but that would (theoretically) allow overlaying things on top. However any click events are probably gonna be consumed by the canvas, not sure if there's a way around that.

[Rok Oblak]

That would be a viable approach, but you would need to make sure every parent composable is also transparent (or becomes transparent when your dialog/child screen shows.

I think you quickly also end up with edge cases... would be really good having proper support from the framework for this

[Skaldebane]

Unsure if there's a way for a drawing operation to ignore that, but the thing about BlendMode.Clear is that it doesn't care what's behind your composable (parent, other siblings, etc...), it will clear everything behind it! (it removes both the destination and target).

But yeah, the issue of edge cases will still exist, for example a semi-transparent HTML element

[Skaldebane]

Here's a little demo: three `Box`es nested inside each other, with the innermost one drawing a rect with BlendMode.Clear using drawBehind modifier. It clears everything behind it, and since <canvas> is transparent by default, we can see the HTML background through it.

Screencast from 2025-02-12 19-16-31.mp4

[אליהו הדס]

> @אליהו הדס I'm wondering if this would be possible by... doing the opposite?
>
> i.e. instead of overlaying the video, put it behind the Compose canvas instead, and then paint the area where it should be with a BlendMode.Clear (which will create a hole in the canvas)...
>
> Never tried this before, but that would (theoretically) allow overlaying things on top. However any click events are probably gonna be consumed by the canvas, not sure if there's a way around that.
@Skaldebane I will try! Thank you very much for the advice

[אליהו הדס]

@Skaldebane Wow it's work !

[אליהו הדס]

https://github.com/kdroidFilter/ComposeMediaPlayer/tree/overlay

[אליהו הדס]

On desktop, the overlay does not work yet but it is not my fault, the overlay with the swingspanel is still experimental
https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-desktop-swing-interoperability.html?ref=zacsweers.dev#experimental-[…]reen-rendering

[Skaldebane]

That link seems to be for putting Compose panels in a Swing app, I think you might be looking for this section instead: https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-desktop-swing-interoperability.html#experimental-interop-blending

[אליהו הדס]

it's not work for me...

[Skaldebane]

Huh, interesting, try opening an issue on YT, maybe it's a bug or limitation.

[Skaldebane]

Though you can (potentially) apply a similar solution to the one on web; but I'm not sure how to go about that (how to create a swing panel behind the Compose panel that's automatically created by Window).

[אליהו הדס]

https://github.com/JetBrains/compose-multiplatform/issues/4941

[אליהו הדס]

I use opengl and directx

[אליהו הדס]

Though you can (potentially) apply a similar solution to the one on web; but I'm not sure how to go about that (how to create a swing panel behind the Compose panel that's automatically created by Window).

I don't know either.

[Skaldebane]

Ahh I see, that sucks...

[Skaldebane]

Yet another case where Compose Desktop on Kotlin/Native could have allowed better solutions (e.g. taking more control of rendering instead of being limited by AWT), but I digress.

[אליהו הדס]

Yes, although I think it is possible to find a solution

[אליהו הדס]

I will have a hard time using kotlin native and not using java dependencies anymore. I would prefer that they make us work compose desktop with graalvm

[אליהו הדס]

Actually I would have to implement this without swing, but that's easy to say.

[Skaldebane]

Yeah, that'd be great, and is the most practical thing for them to support short-term.

[אליהו הדס]

Yeah, that'd be great, and is the most practical thing for them to support short-term.

For me, it would just be to correct the slightly long start-up times.

[אליהו הדס]

@Stefano Milani I've just published on update with wasm support https://kotlinlang.slack.com/archives/C0BJ0GTE2/p1739651533981569

[Chrimaeon]

FYI - the „live demo“ is not doing anything on iPhone Safari

[אליהו הדס]

like all sites with compose web

[Chrimaeon]

No, safari has Wasm GC now.

[Skaldebane]

I believe WasmGC support is still only in Safari nightly?

[אליהו הדס]

I don't think on iOS

[Chrimaeon]

All these work on iOS safari
https://zal.im/wasm/iv/

[אליהו הדס]

I will check

[אליהו הדס]

Thanks

[Skaldebane]

As part of answering this question: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1739755604116079?thread_ts=1739727670.393959&cid=CJLTWPH7S, I realized there's a nitpick about the underlay solution: this only works if the Composable that creates the video doesn't have a parent whose compositing strategy is CompositingStrategy.Offscreen (which itself has a parent that draws something behind it).
For example, a parent that applies the alpha Modifier uses has the Offscreen compositing strategy, as well as applying a RenderEffect.
Not sure if this is worth "fixing"; users who fall into this (if ever) can workaround this themselves by taking the position of the video composable, and applying another BlendMode.Clear above the Modifier that caused offscreen compositing.
(probably would be most likely caused by stuff like AnimatedVisibility / AnimatedContent? It would simply cause the video to disappear once the animation starts in case of disappearance, and appear once the animation ends in case of appearance, afaik)

[Stefano Milani]

@אליהו הדס Woawww, thanks a lot! I really appreciate your hard work

[אליהו הדס]

@Chrimaeon

All these work on iOS safari

Check now, it must work on safari