Question

我正在帮助建立一个网站，我们希望在您登陆网站时拥有视频背景。

它在Google Chrome上运行得很好但在Safari上无法正常工作。

这是网站（请将其与Chrome和safari进行比较）：http://tinyurl.com/nbe8rzy

HTML视频：

<video autoplay loop poster="polina.jpg" id="bgvid">
    <source src="<?php bloginfo('template_url'); ?>/assets/img/video1.mp4" type="video/mp4">
</video>

视频CSS：

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
background-size: cover;
z-index: 1; }

我在视频上使用z-index 1的固定位置，并且在其余的div上使用较高的z-index，然后是1的相对位置（因此视频保留在后台）。

野生动物园的问题：

视频拉伸延迟
其他div不显示

问题：

我该如何解决这个问题？（代码/链接/帮助非常感谢！）
是否可以将视频背景用于移动/ ipad？还是应该回退到图像？

Answer 1

将您的视频背景div更新为

#yourvideobackground { 
     position: absolute;
     top: 0px;
     left: 0px;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -1000;
     overflow: hidden;
}

要解决大多数浏览器（包括Safari）的视频问题，您必须给它一个绝对位置，并将其z-index设置在其上方的所有其他元素下方。

您也不能使用background-size属性，不能用于视频。

如果您想要在另一个div中，请确保父div具有相对位置集。

如果你不想走这条路，你可以使用我已经取得成功的漂亮插件。

https://github.com/Victa/HTML5-Background-Video

祝你好运！

Safari中的视频背景HTML5

1 个答案: