html - Muted autoplay videos stop playing in Safari 11.0

Question

I have these videos on my site with attributes listed below:

<video width="100%" poster="poster_url.png" autoplay loop muted playsinline>
<source src="video_url.mp4" type="video/mp4">
</video>    

Everything worked just fine until I’ve installed Safari 11. This version shows poster images and does not autoplay videos even though they don't have an audio track. Take a look at it on my site.

I saw autoplay videos working on other sites (even without muted property) on my own laptop in Safari.

Any help would be greatly appreciated!

Answer 1

Yup, it appears Safari is also blocking muted video's (that don't even have sound)...

I have found a workaround, but it isn't pretty and I'm not proud of it:

var ua = navigator.userAgent.toLowerCase();
var is_safari = (ua.indexOf("safari/") > -1 && ua.indexOf("chrome") < 0);
if(is_safari) {
    var video = document.getElementById('#video-element-id');
    setTimeout(function() {
       video.play();
    }, 50);
}                       

I have tried doing this without the timeout, but Safari is rejecting this by throwing a Promise rejection. I don't know why...