Safari 无法播放 HTML5 视频答案

【问题标题】：Safari won't play HTML5 videoSafari 无法播放 HTML5 视频
【发布时间】：2015-12-12 02:04:15
【问题描述】：

我正在尝试为网站创建 HTML5 视频背景，但我似乎无法让它在 Safari 上运行。有人有什么想法吗？

这是我正在使用的 HTML 视频标签

<video id="bgVideo" class="bg__video" autoplay loop>
  <source src="./vid/Sample_Vid.ogv" type="video/ogv">
  <source src="./vid/Sample_Vid.m4v" type="video/m4v">
  <source src="./vid/Sample_Vid.webm" type="video/webm">
</video>

我尝试在其下添加一个脚本标签以开始使用 JS 播放视频，但这也无济于事。

document.getElementById("bgVideo").play();

当我检查页面时，看起来视频元素正在占用 DOM 中的空间，但它基本上是不可见的。

我也试过直接在浏览器中打开 .m4v 文件，它会在那里播放，所以我认为该文件不是问题。这些都是从easyhtml5video.com生成的

我还有 Modernizer 脚本来检测是否为浏览器启用了自动播放，我必须根据 pull request in the github repo 进行更改，因为它总是说 Safari 不支持自动播放。

我设置的测试站点是http://treetopia.neilnand.co.uk/

【问题讨论】：

标签： html safari html5-video

【解决方案1】：

Safari 支持的视频格式是mp4，编码为H.264。（你有一个.m4v 扩展名和文件类型）

【讨论】：

谢谢，这让我思考并注意到了这个问题。 Safari 确实播放 .m4v 文件，但我将类型设置为 video/m4v，它应该是我刚刚更改的 video/mp4，现在可以使用了。

【解决方案2】：

如果视频没有声音 - 使用

document.getElementById("bgVideo").volume = 0;

Safari 不允许自动播放有声视频。

【讨论】：

或者对<video> 使用muted 属性，这似乎也是一样的，也可以。