HTML5 视频不会在 Chrome 和 Safari 上自动播放答案

【问题标题】：HTML5 video does not autoplay on Chrome and SafariHTML5 视频不会在 Chrome 和 Safari 上自动播放
【发布时间】：2015-12-16 02:42:38
【问题描述】：

谁能告诉我为什么这个 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 存在问题。

【问题讨论】：

我建议添加第三种视频类型，.ogg。我相信这实际上可以跨浏览器正确覆盖您。
感谢@Brant 的建议。我已经添加了 .ogg 但它没有任何区别。我可以从这个页面复制代码，将它粘贴到任何其他页面，它工作正常。此页面上的某些内容正在扼杀视频...
显示代码..please..
刚刚在我的帖子@scaisEdge 中添加了视频块。
在 Chrome 中为我工作。

标签： javascript jquery html html5-video

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试在http://caniuse.com/#feat=video查看可以使用视频标签

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

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

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

【讨论】：

如果 Safari 出现 webm 问题，不应该回退到 mp4 吗？我想会的。
看看你是否需要一个正确的编解码器，我认为 canuse 中有一个参考，如果我的回答有用请评价它