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中看到了在其他网站上工作的自动播放视频（甚至没有静音属性）。

非常感谢您的任何帮助！

- Andrey

---

你的评论与匿名用户的帖子完全不相关。 - Stephen Tetreault

我的博客文章总结可能会有所帮助 -> https://medium.com/@BoltAssaults/autoplay-muted-html5-video-safari-ios-10-in-react-673ae50ba1f5 - BoltCoder

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

---

在我的电脑上无法工作或者在 Safari 12 以上版本中无法工作。 - Markus G.

看起来你只是在延迟播放，这表明你没有在视频元数据加载事件后调用播放函数。 - Ali Mert Çakar

Answer 2

我也曾遇到过这个问题，是一个在网站背景中播放的短MP4视频。我成功解决了在iOS Safari 11中的问题，而无需使用JS，只需要在video标签上添加controls="true"和playsinline属性即可。

示例：

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

注意： Safari不支持.webm格式，所以不要像我一样为此而苦恼比你想象的时间更长。

- Ben Sampica

---

同样不起作用。在我的情况下，我有自动播放的视频，并且使用 playsinline 完美地自动播放，但我正在尝试在用户点击某个按钮时切换静音（无法显示控件）。添加控件属性不允许像我这样切换音量。我的项目在桌面 Chrome / 桌面 FF 中运行 - 只是在桌面 Safari / 移动 Safari 中不起作用。 - Stephen Tetreault

我已经快要崩溃了，因为这个问题毫无道理。结果发现，Vue.js的Nuxt模块正在破坏范围请求。如果冒犯了你，请接受我的道歉。 - Stephen Tetreault

Answer 3

我发现最可靠的方法是确保以下内容：

• 页面上至少有一个用户交互（chrome mobile）
• 音频标签（all）带有muted属性
• 视频标签（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>

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

- Kim T

---

"playsinline"？哇... :D 以前从未听说过，谢谢你。 - jebbie

Answer 4

将src属性放在<video>标签内，而不是使用<source>标签。

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

使用 <source> 元素时，仅当页面加载时该元素在视图中才能正常工作（已在 Safari 11.0 上进行测试）

macOS 自动播放策略变更的链接。

- CharlesBoury

Answer 5

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

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

- Adam Kiryk