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

问题描述

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

I spent quite a lot of time trying to figure out why video embedded like here:

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

starts playing automatically once the page is loaded in FireFox but cannot do autoplay in Webkit based browsers. This only happened on some random pages. So far I was unable to find the cause. I suspect some unclosed tags or extensive JS created by CMS editors.

推荐答案

我能得到的最好解决方法是在 </video>

The best fix I could get was adding this code just after the </video>

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

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

...not pretty but somehow works.

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

UPDATERecently many browsers can only autoplay the videos with sound off, so you'll need to add muted attribute to the video tag too

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

这篇关于视频自动播放在 Safari 和 Chrome 桌面浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！