我有一个如下所示的文档:
var currentScene = "";
function loadStandings(stinger) {
let timeout = 0;
if (stinger) {
let transition = document.getElementById("stinger");
transition.play();
timeout = 750;
}
window.setTimeout(() => {
let request = new XMLHttpRequest();
request.open("GET", "elements/standings.html", true);
request.onload = () => {
if (request.status >= 200 && request.status < 400) {
document.getElementById("container").innerHTML = request.responseText;
}
};
request.send();
}, timeout);
}#container {
position: absolute;
width: 1920px;
height: 1080px;
z-index: 0;
}
#stinger {
position: absolute;
top: 0;
left: 0;
min-width: 1920px;
min-height: 1080px;
z-index: 1000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: "Montserrat";
}
</style>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="stinger-container">
<video id="stinger">
<source src="gfx/transitions/Wipe02.webm">
</video>
</div>
<div id="container">
</div>
</body>
</html>loadStandings 被调用，并且视频(应该是一个 stinger 过渡)播放。但是，当超时并且 container div 的内容被我加载的内容替换时，视频立即消失在背景中并被新加载的内容覆盖。它确实会继续在背景、声音和所有内容中播放，但这不是我想要的。
我希望视频在加载过程中保持在顶部，而不是内容切入视频并使其消失 - 它有一个 Alpha channel ，并且应该覆盖没有内容 -> 加载时的不和谐剪切内容。
有办法实现这一点吗？我已经尝试了所有我能想到的 CSS 肮脏技巧；设置 z-index 似乎也不会影响任何东西。
最佳答案
我是个彻头彻尾的白痴。修复结果是将这个小片段添加到我的 html 中:
<link rel="stylesheet" type="text/css" href="index.css">
...不是我最辉煌的时刻...
关于javascript - 确保 HTML 5 视频始终在其他所有内容之上播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60425934/