视频自动播放在 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。

Answer 1

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

根据 developers.google 中的这篇帖子。 com，从 Chrome 53 开始，如果视频静音，浏览器会遵循自动播放选项。

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

摘自上述链接：

Answer 2

我能得到的最佳解决方案是在

之后添加此代码

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

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

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

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