Question

我正在尝试为网站创建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/

Answer 1

Safari支持的视频格式为<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <button class="button button-block"> <i class="fa fa-plus-circle"></i><span>Add to Favorites</span> </button>，编码为H.264。（您有mp4扩展名和文件类型）

Answer 2

如果视频没有声音 - 请使用

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

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

Safari不会播放HTML5视频

2 个答案: