html - HTML5 视频的自动播放不起作用

Question

我不确定为什么自动播放功能在现场不起作用。现场直播 - http://lyorcohen.searchinteractions.com/ComingSoon/

<video class="supervideo hidden-phone hidden-tablet" poster="images/stillframe.jpg" autoplay>
<source src="video/WeaveLogo.mov" />
Your browser does not support the HTML5 video tag. Please upgrade it.
</video>

Answer 1

适用于 Chrome，但不适用于 Firefox。

当 MP4 失败时，您也会在 Firefox 中收到此错误（由于在不支持 Firefox mp4 的 XP 机器上进行测试）：

HTTP 加载失败，状态为 404。媒体资源 http://lyorcohen.searchinteractions.com/ComingSoon/video/WeaveLogo.ogg加载 失败。

这意味着由于 ogg 文件丢失，回退失败。检查文件是否确实存在并且名称拼写是否相同，包括大小写。

在 Chrome 上，MP4 视频会自动播放并且工作正常。

您还可以考虑提供webm文件的版本。

为了消除更多可能的原因，您可以在源标签中提供 type 属性：

<source src="video/WeaveLogo.webm" type="video/webm" />

您autoplay正确使用了该属性，但一些特殊的浏览器历来在没有值的属性方面存在问题，因此您可以添加=true它以使这些浏览器满意（尽管我只能考虑一个浏览器......）。

Answer 2

在 Magento 网站上添加视频时，我遇到了类似的问题。似乎当我在 autoplay 属性之前使用 preload 属性时，它解决了问题。在 Chrome 中测试

Answer 3

var vid = document.getElementById("myVideo");
vid.autoplay = true;
vid.load();

Answer 4

大多数浏览器要求视频由用户启动或静音。

尝试：

<video class="supervideo hidden-phone hidden-tablet" poster="images/stillframe.jpg" muted="muted" autoplay>
<source src="video/WeaveLogo.mov" />
Your browser does not support the HTML5 video tag. Please upgrade it.
</video>