Question

我目前正在处理一个项目，我需要将2个可能3个视频叠加在一起。我已经能够使用Flash以及使用html5视频标签和Z索引的视频来实现这一点，但是当我按F11全屏显示所有我能看到的是第一个视频，即第一层应该有顶部的分层视频。我的项目的标准要求在f11上我的项目在构建时启动层。我尝试给我的前2个视频一个超高的z-index，我读过它可以工作，但没有骰子。

我做了一个小提琴，有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>

Answer 1

看起来您已经找到了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;，＆＃34;将背景缩放到尽可能大，以便背景被背景图像[视频]完全覆盖。＆＃34;

支持

background-size： - Chrome：4.0+ - IE9 - Firefox：4.0+ - Safari：4.1+ - 歌剧：10.5

Updated fiddle

使用Z-Index的全屏分层视频

1 个答案: