【发布时间】：2015-03-03 13:41:17
【问题描述】：
我目前正在处理一个项目，我需要将 2 个可能 3 个视频叠加在一起。我已经能够使用 Flash 以及使用 html5 视频标签和 Z-indexes 的视频来做到这一点，但是当我按 F11 进入全屏时，我只能看到第一个视频，即应该有的第一层上面的分层视频。我的项目的标准要求在 f11 上我的项目在构建时使用图层启动。我试着给我的前 2 个视频一个超高的 z-index，我读过它会起作用，但没有骰子。
我制作了一个小提琴，其中有 1 个视频设置为背景，2 个位于顶部。这再次有效，直到我按 f11 进入全屏。它似乎只是在所有 z-index 之上渲染底部或背景视频。
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>
【问题讨论】：
-
SO 有一个规则可以防止在您的答案中没有代码时发布小提琴链接是有原因的 - 这是因为我们希望作者了解他们发布的代码并为我们减少它，如果可能的话，而不是简单地转储链接而不给出代码及其作用的充分描述。请不要绕开这条规则。
-
对不起？我不确定你在说什么。这一定是在我编写代码之前查看过的。
-
@Terry 虽然代码不在问题中，并且可能应该是 OP 确实理解了代码并且确实创建了一个小例子，这就是小提琴。他还非常清楚地描述了我认为的问题。
-
是的，我指的是你的initial incomplete question，然后再编辑它。
-
听着，我只是想弄清楚。我不在这里发帖是有原因的，因为有很多虚张声势，而不是回答问题，更多的问题只是被问到了。我想我的问题很直截了当。我提供了我的代码。以前有人用过分层视频和 z-index 吗？