视频自动播放在 Safari 和 Chrome 桌面浏览器中不起作用

Question

我花了很多时间试图弄清楚为什么像这里这样嵌入视频：

 <video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

页面在 FireFox 中加载后自动开始播放，但在基于 Webkit 的浏览器中无法自动播放。这只发生在一些随机页面上。到目前为止，我无法找到原因。我怀疑 CMS 编辑器创建了一些未封闭的标签或大量 JS。

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

Answer 1

我能得到的最好的解决方法是在 </video> 之后添加此代码

<script>
    document.getElementById('vid').play();
</script>

…不漂亮，但不知何故有效。

更新 最近很多浏览器只能自动播放没有声音的视频，所以你需要添加 muted 属性到视频标签

<video autoplay muted>
...
</video>

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

Answer 2

在使用 jQuery play() 或其他答案建议的 DOM 操作后，它在 Chrome for Android（版本 56.0）中仍然无法正常工作（视频未自动播放）。

根据 developers.google.com 中的这篇 文章，从 Chrome 53 开始， _如果视频静音_，浏览器会尊重自动播放选项。

因此，在 video 标签中使用 autoplay muted 属性可以让视频在 Chrome 浏览器 53 版本中自动播放。

摘自以上链接：

从版本 53 开始，适用于 Android 的 Chrome 支持视频的静音自动播放。如果同时设置了 autoplay 和 muted 设置[.. .]

 <video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• iOS 10 及更高版本的 Safari 支持静音自动播放。
• Firefox 和 UC 浏览器已经在 Android 上支持自动播放，无论是否静音：它们不会阻止任何类型的自动播放。

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