我目前正在处理一个元素,我需要将 2 个或 3 个视频叠加在一起。我已经能够使用 Flash 以及使用 html5 视频标签和 Z 索引的视频来做到这一点,但是当我按 F11 进入全屏时,我只能看到第一个视频,即应该有的第一层上面的分层视频。我的元素的标准要求在 f11 时我的元素在构建层时启动。我尝试为我的前 2 个视频提供一个超高的 z-index,我认为它可以工作,但没有骰子。
我制作了一个 fiddle ,其中有 1 个视频设置为背景,2 个位于顶部。这再次起作用,直到我按 f11 进入全屏。它似乎只是在所有 z 索引之上渲染底部或背景视频。
https://jsfiddle.net/lukeslytalker/j1ssLqvj/2/
HTML
<div id="over">
<video autoplay loop>
<source src="minion1.mp4"></source>
</video>
</div>
<div id="over2">
<video autoplay loop>
<source src="minion2.mp4"></source>
</video>
</div>
<video autoplay loop id="myvideo">
<source src="152_0030.mp4"></source>
</video>
CSS
body {
margin:0;
padding:0;
overflow:hidden;
}
#over {
position: absolute;
left: 0px;
top: 0px;
z-index: 10005;
}
#over2 {
position: absolute;
left: 0px;
top: 0px;
z-index: 10000;
}
Javascript
<script>
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
</script>
最佳答案
看起来你已经弄清楚了 z-index 部分,如果我没理解错的话,你希望视频是全宽的?
这可以使用 background-size
样式来完成。
video{
background-size:cover;
/*vendor prefixes*/
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
/*sizing*/
width:100%;
margin:0 auto;
display:block;
}
这针对每个视频,说 background-size:cover;
,“将背景缩放到尽可能大,以便背景完全被背景图像覆盖 [视频] ”
background-size
支持:
- Chrome :4.0+
- IE9
- 火狐:4.0+
- Safari :4.1+
- 歌剧:10.5
关于css - 使用 Z-Index 的全屏分层视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28833315/