HTML5 视频的自动播放不起作用 [英] Autoplay of HTML5 video doesn't work

问题描述

我不确定为什么自动播放功能在网站上不起作用.实时站点 - http://lyorcohen.searchinteractions.com/ComingSoon/

I am not sure why autoplay function doesn't work on site. Live site- 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>

推荐答案

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

Works in Chrome but not in Firefox.

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

You also get this error in Firefox when the MP4 fails (due to testing this on an XP machine which does not support mp4 with Firefox):

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

HTTP load failed with status 404. Load of media resource http://lyorcohen.searchinteractions.com/ComingSoon/video/WeaveLogo.ogg failed.

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

which means the fall-back fails due to the ogg file gone missing. Check that the file actually is there and that the name is spelled the same including capitalization.

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

On Chrome the MP4 video auto-plays and works fine.

您也可以考虑提供文件的 webm 版本.

You could also consider to provide a webm version of the file.

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

To eliminate further possible causes you can provide the type attribute in your source tags:

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

您正确使用了 autoplay 属性，但一些特殊的浏览器在历史上曾遇到过没有值的属性问题，因此您可以向其中添加 =true 以使这些浏览器满意(不过我只能考虑一种浏览器......).

You are using the autoplay attribute correctly but some peculiar browsers has historically had problems with attributes without values so you can add =true to it to make these browsers happy (I can only think about one browser though...).

这篇关于HTML5 视频的自动播放不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！