静音自动播放视频在 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 之前，一切都运行良好。此版本显示海报图像并且不会自动播放视频，即使它们没有音轨。在我的 网站 上看看它。

我在 Safari 中看到在我自己的笔记本电脑 上其他网站上的 自动播放视频（即使没有静音属性）。

任何帮助将不胜感激！

原文由 Andrey 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 拒绝来拒绝此操作。我不知道为什么…

原文由 PIDZB 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

例子：

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

注意： Safari 不支持 .webm 所以不要像我一样和它斗争的时间比你愿意承认的要长。

原文由 Ben Sampica 发布，翻译遵循 CC BY-SA 4.0 许可协议