静音自动播放视频在 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 之前一切正常。此版本显示海报图片并且不会自动播放视频，即使它们没有音轨。看看我的 site.

我看到自动播放视频在我自己的笔记本电脑上的 Safari 中工作 on other sites（即使没有静音属性）。

如有任何帮助，我们将不胜感激！

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

我运行遇到了类似的问题，并用 canplaythrough 事件（或 canplay 事件）解决了它。这可能会解决 Abayob 解决方案中对 setTimeout 的需求：

const video = document.getElementById('#video-element-id');
video.oncanplaythrough = function() {
    video.play();
}

Answer 3

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

示例：

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

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

Answer 4

将 src 属性放在

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

只有元素在页面加载时可见（在 safari 11.0 上测试）

link 个 Auto-Play Policy Changes for macOS。

Answer 5

我发现的最可靠的方法是确保：

页面上至少有一次用户互动（chrome 移动设备）
标签上的静音属性（全部）
标签上的 playsinline 属性 (safari)

看起来像这样：

<style>
  video {
    display: none;
  }
  video.active {
    display: block;
  }
</style>
<button id="button">Show video</button>
<video id="video" muted playsinline></video>
<script>
    var button = document.getElementById('button');
    var video = document.getElementById('video');
    button.addEventListener('click', function() {
        video.className = 'active';
        video.src = 'https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4';
        video.play();
    });
</script>

一个技巧是为每个视频重复使用相同的视频播放器。然后它只需要在第一次激活。每次连续播放都可以自动发生。

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

Muted autoplay videos stop playing in Safari 11.0

html

safari

video

autoplay