video behavioral differences with svelte 5

[michelheusschen]

Describe the bug

Using the same svelte 4 code in svelte 5 behaves differently:

• <video muted> isn't muted in firefox
• Video duration is NaN when pressing Toggle video after playback has started (tested in firefox and chrome)

Reproduction

Svelte 4
Svelte 5

Logs

No response

System Info

latest REPL versions

Severity

annoyance

[hyunbinseo]

I was also facing the muted not working issue.

Didn't know it was caused by Svelte 5. Thank you.

Possibly related:

• Video attribute 'muted' not applied in Firefox vuejs/vue#6887

[benmccann]

Thanks for the pointer to that Vue issue! Probably we need to do something like they did: vuejs/vue@f2e00f7

(I'm not sure it's related, but I also found this StackOverflow issue regarding muted behavior in Firefox: https://stackoverflow.com/questions/28762211/unable-to-mute-html5-video-tag-in-firefox)

[trueadm]

The second issue about NaN comes from the fact we clone a template using cloneNode. Solid and other frameworks that use this strategy also run into this issue too. https://playground.solidjs.com/anonymous/ffdcc57c-5ef1-4dea-b426-dd0311d2d22f. It seems to only happen on Chroimum browsers though – so there's little we can do other than raise an issue with the Chromium folks. I have a PR for the muted issue.

[michelheusschen]

The second issue about NaN comes from the fact we clone a template using cloneNode. Solid and other frameworks that use this strategy also run into this issue too. https://playground.solidjs.com/anonymous/ffdcc57c-5ef1-4dea-b426-dd0311d2d22f. It seems to only happen on Chroimum browsers though – so there's little we can do other than raise an issue with the Chromium folks.

NaN also shows up whenever the "Toggle video" button is pressed in chrome and firefox (REPL) because of player.src = ''. In Svelte 4 all NaN values are filtered out. I’m not sure how much backwards compatibility Svelte 5 aims for, but I’m also fine filtering them out manually.

I have a PR for the muted issue.

I gave it a try and it works great, thank you!

[trueadm]

@michelheusschen I couldn't see any code in Svelte 4 that filters it out? Am I missing something here?

[michelheusschen]

I'm not sure if it's actually filtered out, it may be caused by the timing or removal of event listeners. When using player.addEventListener('timeupdate') in svelte 4 it also logs NaN when pressing the toggle button REPL

[benmccann]

Maybe something to add to the breaking changes list at the very least?