HTML5视频无法在Chrome和Safari上自动播放

Question

谁能告诉我为什么这个HTML5视频不起作用？ 它可以在Firefox中正常运行，但不能在Safari或Chrome中运行。 似乎无法弄清楚发生了什么。

这是我正在使用的页面http://www.adventures.org/trips/?prg=passport&new=design 。

该视频位于较大的Passport徽标后面。

这是视频代码。

 <video autoplay loop muted class="fillWidth"> <source src="http://adventures.org/trips/video/PassportHeader.mp4" type="video/mp4" /> <source src="http://adventures.org/trips/video/PassportHeader.webm" type="video/webm" /> Your browser does not support the video tag. I suggest you upgrade your browser. </video> 

感谢所有的建议！ 我终于弄明白了。 视频编解码器的页脚中的Facebook API出现问题。

Answer 1

我的猜测是浏览器与您设置的两个源混淆了。 尝试这个：

<video autoplay loop  muted class="fillWidth">
  <source src="http://adventures.org/trips/video/PassportHeader.mp4" type="video/mp4" />
</video>

Answer 2

尝试在此http://caniuse.com/#feat=video上检查canuse视频标签

似乎针对webm Safari浏览器中的编解码器存在一些问题

如果用户已安装WebM编解码器，则可在IE9 +和Safari / MacOSX中使用。 部分支持表示至少支持一种编解码器，但并非全部。

检查内部注释和关键问题http://caniuse.com/#feat=webm