Safari ignoring html5 video muted attribute

Question

Not sure what im doing wrong but i cannot get safari to mute my video even though it's defined. it works in other browsers but not safari. Does it support this attribute?? I'd rather not use the javascript/jquery fix but if i have to then i guess. Thanks in advance.

Here's the code

    <video autoplay loop muted>
    <source src="/media/installation.mp4" type="video/mp4">
    <source src="/media/installation.ogv" type="video/ogg">
    <source src="/media/installation.webm" type="video/wbm">
    </video>

Answer 1

It looks like Safari does not support this attribute. It's not listed among the supported attributes in Apple's documentation. It's left out of the browser compatibility table on MDN. Testing shows that setting the muted property on the DOM object does not add the attribute. For comparison, setting controls to true does set the controls attribute.

I'm afraid you need to use Javascript for this.

It's worth noting that Mobile Safari on iOS ignores both volume and muted, even if you use Javascript. The only way to control volume of a video in that case is with the hardware volume controls.

Answer 2

I have penned down my findings to get autoplaying muted video to work in all ios 10+ safari browsers. This is an amalgam of all hacks there are to get it to work.

If this link works in your troubling ios10+ Safari -> https://ney5u.csb.app/

then follow this thread for answer https://medium.com/@BoltAssaults/autoplay-muted-html5-video-safari-ios-10-in-react-673ae50ba1f5