1860282 - Video not muted after solid-start SPA routing

Status: UNCONFIRMED

(Core :: Audio/Video, defect)

Description

[aron]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/118.0

Steps to reproduce:

Use the bare create (from solidjs) solid-start template. Created a landing page on "/en" and added client routing anchor of solidjs (<A>, but the useNavigations hook also works and produces the bug) to "/en/overview". When the user clicks on the <A>, the content is being updated without a page refresh (as expected) with expected videos having "autoplay", "muted" and "loop" set.

Actual results:

The videos starts WITH sound after client side routing, which it shouldn't do. When refreshing the page or using an normal <a> tag on the "/en" landing page to go to the "/en/overview" page the problem does not occour and the videos autoplay in a muted state as expected.

Expected results:

Videos should autoplay in a muted state when (I guess) being locally inserted in the DOM due to the client side routing magic. Tested on Linux and with Firefox on Android, both are affected. Chrome does not have this problem.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[aron]

It's my first Bugzilla report, but sounds good to me. 👍

Comment 3

[aron]

I just tested what I had thought of before, the bug simply occours when video tags are inserted. The expected "muted" behavior is only applied on elements being present on first page load.

Also, when I disabled the SSR feature of solid-start, I noticed the videos are present but the "autoplay" didn't started. I added "controls" and started videos manually, they weren't muted, but they looped, despite all three attributes present in the DOM. So in summary without SSR "autoplay" and "muted" weren't applied, but the "loop" still was.

Comment 4

[Sean Feng [:sefeng]]

Indeed sounds like an issue if the video should be played as mutated.

Do you have a testcase that can reproduce this issue, ideally without using any frameworks?

If a framework has to be involved, I wonder if you can just upload the bare created solidjs template to a github repo and we can just download and run it?

Thanks!

Comment 5

[aron]

(You need git and npm with nodejs installed)

• git clone https://github.com/dev-unlimited/jg-eucs
• cd jg-eucs/
• git checkout bugzilla
• npm install
• npm dev
• Open http://localhost:3000 in your browser of choice. ;) It should auto redirect to "/en" or "/de" depending on your browser defaults.
• On the bottom of that page, click the read everything button and get client redirect to "/en/overview" or "/de/overview".
• Experience the bug (Mind your sound level, jumpscared me too.)

Comment 6

[Sean Feng [:sefeng]]

Thanks! I am able to reproduce it.

I can't even mute the video by right clicking on the video and select mute.

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jimm, could you have a look please?

For more information, please visit BugBot documentation.