Safari中的视频背景HTML5

Question

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

它在谷歌浏览器上运行得很好,但它在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的相对定位(因此视频保留在后台).

野生动物园的问题:

1. 视频拉伸延迟
2. 其他div没有显示

问题:

1. 我怎样才能解决这个问题？(代码/链接/帮助非常感谢!)
2. 是否可以使用移动/ 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

祝好运!