Video element muted returns false in Chrome, even though attribute is set to "muted"

Question

We have an html element with the autoplay, muted and loop attributes declared. We noticed that the video is being blocked from autoplaying, due to the new Chrome 66 autoplay policy. Logging video.muted returns false in Chrome dev tools, but true in Safari - is there any reason that Chrome would see the video as unmuted, even though that attribute is explicitly being set?

Edit: adding video tag markup: <video preload="true" autoplay muted loop width="100" height="100" id="hero-video" class="fullscreen-video" aria-label="This is a background video showing example consumers."> <source src="./assets/videos/myvideo.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

We're using Vue and Webpack in our build as well.

You'll probably need to show how you did set it to muted, because like this, it's a no repro — Kaiido
– Kaiido, Commented May 9, 2018 at 14:59
@Kaiido, thanks - I just updated the original question with the video tag markup. — flysi3000
– flysi3000, Commented May 9, 2018 at 15:25
Still a no-repro for me: jsfiddle.net/t9neye6j (chrome 66 osX) — Kaiido
– Kaiido, Commented May 10, 2018 at 0:36
Thanks for trying - it's a weird one. I think it's got something to do with the way the project is set up to build, but since many devs have touched this one, it's tough to track down. In the end, we worked around it by binding the <video> element's attributes to props in Vue. — flysi3000
– flysi3000, Commented May 10, 2018 at 12:50

Christophe Marois · Accepted Answer · 2018-07-24 18:48:08Z

Got the same problem. Using Vue as well, but I believe this may apply in other situations. In my case, the boolean attributes autoplay and muted are both set on the <video> element tag, but videoEl.muted still equals false. This might be a bug in the new "no autoplay on non-muted videos" policy.

I managed to fix it by removing both autoplay and muted attributes, then manually triggering them:

const videoEl = document.querySelector('video')
videoEl.muted = true
videoEl.play()

(vanilla js example, but in Vue, you'd put it in the mounted() lifecycle hook, and refer to your <video> tag through this.$refs)

Paul J · Accepted Answer · 2018-10-05 10:53:31Z

2

We're had a similar problem here in Vue. The muted property seems to return false in Chrome and Firefox, but true in Safari. A potential solution we've found is to bind the muted property to Vue. This seems to allow the muted value to stay true once the page loads.

v-bind:muted="true"

answered Oct 5, 2018 at 10:53

Paul J

211 bronze badge

Add a comment |

Collectives™ on Stack Overflow

Video element muted returns false in Chrome, even though attribute is set to "muted"

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related