静音自动播放视频在Safari 11.0中停止播放

Question

我在我的网站上有这些视频,其属性如下所示:

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

一切正常,直到我安装Safari 11.此版本显示海报图像,即使没有音轨也不会自动播放视频.在我的网站上看一下.

我在自己的笔记本电脑上看到自动播放视频在其他网站上工作(即使没有静音).

任何帮助将不胜感激!

Answer 1

是的,似乎Safari也阻止静音视频(甚至没有声音)......

我找到了一个解决方法,但它并不漂亮,我并不为此感到骄傲:

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);
}                       

我已经尝试过这样做而没有超时,但Safari通过抛弃Promise拒绝来拒绝这一点.我不知道为什么......

Answer 2

对于在网站后台播放的简短 mp4，我也遇到了这个问题。通过使用controls="true"和限定视频标签，我能够在不需要 JS 的情况下获得适用于 iOS Safari 11 的解决方案playsinline。

例子：

<video autoplay loop playsinline muted controls="true" src="~/background.mp4" type="video/mp4"></video>

注意： Safari 不支持 .webm，所以不要像我一样为此而苦苦挣扎的时间比你想承认的要长。