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

javascript html google-chrome safari webkit

2022-08-30 01:11:32

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

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

答案 1

我能得到的最好的修复方法是在</video>

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

...不漂亮，但以某种方式工作。

更新最近，许多浏览器只能在关闭声音的情况下自动播放视频，因此您还需要为视频标签添加属性muted

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

答案 2

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

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

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

摘自以上链接：

自版本 53 起，Android 版 Chrome 支持静音视频自动播放功能。视频元素进入视图后，如果两者都设置了[...]，则视频元素的播放将自动开始[...]autoplaymuted
<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>
iOS 10 及更高版本上的 Safari 浏览器支持静音自动播放。

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