Question

我的网站上有这些视频，其中包含以下属性：

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

在我安装Safari 11之前，一切正常。此版本显示海报图像，即使没有音轨，也不会自动播放视频。在我的site上查看它。

我在自己的笔记本电脑上看到自动播放视频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

我也遇到了这个问题，因为在网站的背景下播放了一个简短的mp4。通过使用controls="true"和playsinline对视频代码进行限定，我能够获得适用于iOS Safari 11的解决方案而无需JS。

示例：

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

注意： Safari并不支持.webm所以不要像我一样挣扎，并且要比你想承认更长时间。

Answer 3

我找到的最可靠的方法是确保：

页面上至少有一次用户互动（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 = url;
        video.play();
    });
</script>

Answer 4

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

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

Answer 5

将src属性放在＆lt; video＆gt;内而不是使用＆lt; source＆gt;

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

使用＆lt; source＆gt;它只适用于页面加载时元素在视图中（在safari 11.0上测试）

Auto-Play Policy Changes for macOS。

的链接

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

5 个答案: