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

【问题标题】：Muted autoplay videos stop playing in Safari 11.0静音的自动播放视频在 Safari 11.0 中停止播放
【发布时间】：2018-03-26 12:29:56
【问题描述】：

我的网站上有这些视频，其属性如下：

<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（即使没有静音属性）。

任何帮助将不胜感激！

【问题讨论】：

您的评论 0% 与 OP 帖子@anonymous 相关
我的博客文章总结了调查结果可能会有所帮助 -> medium.com/@BoltAssaults/…

标签： html video safari autoplay

【解决方案1】：

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

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

看起来像这样：

<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>

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

【讨论】：

"playsinline"..？哇...：D 以前从未听说过，谢谢

【解决方案2】：

将src 属性放在

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

仅当页面加载时元素在视图中时才有效（在 safari 11.0 上测试）

Auto-Play Policy Changes for macOS的链接。

【讨论】：

【解决方案3】：

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

例子：

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

注意： Safari 不支持 .webm，所以不要像我一样，在这个问题上挣扎的时间比你想承认的要长。

【讨论】：

也不起作用。在我的情况下，我的视频可以完美地自动播放playsinline，但我试图在用户点击某个按钮的手势上切换静音（无法显示控件）。添加控件属性不允许像我一样切换音量。我的项目在桌面 chrome/desktop ff 中工作 - 只是不是桌面 safari/mobile safari。
我束手无策，因为这个问题没有意义。原来 vuejs 的一个 nuxt 模块正在处理远程请求。对不起，如果我冒犯了你。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

不适合我的工作或不适合 safari > 12