Question

Can anyone tell me why this HTML5 video isn't working? It works fine in Firefox, but not in Safari or Chrome. Can't seem to figure out what's going on.

Here's the page I'm working on http://www.adventures.org/trips/?prg=passport&new=design.

The video is behind the big Passport logo.

Here's the video code.

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

Thanks for all the suggestions! I finally figured it out. The video codec was having an issue with the Facebook API located in my footer.

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

HTML5 video does not autoplay on Chrome and Safari

2 个答案: