我想在html5视频上添加叠加热点,这将帮助我提供有关该视频的信息.我能够在HTML5 Video的普通模式下成功添加它.但是,当我将视频模式更改为全屏时,它会消失.希望有人帮助我!!!
当我"全屏"一个元素(让我们说一个div)时,我无法获得任何其他元素(在全屏模式下).为什么会这样？我怎么能做到这一点？
我有一个测验视频覆盖，当 videojs 播放器处于标准模式时，它会很好地显示：https ://jsfiddle.net/kai_noack/zxtkgme7/20/
但是，当进入全屏时它会消失（可能在视频后面）。
我找到了一个过时的解决方案，它将叠加层的z-index指定为最大值。它不适用于最新的 Chrome 和 Firefox。
我找到了另一种解决方案来与 parent进行全屏，而不是 videoplayer 本身，但它不适用于 videojs player 设置。
然后我找到了一个很有前途的解决方案，即如何通过设置 position:absolute;使覆盖元素出现在全屏上。并试图实现它但没有成功：https : //jsfiddle.net/kai_noack/zxtkgme7/26/
我上次尝试的HTML（见小提琴）：
<div id="main-container">
<div id="overlays-wrap">
<div class="overlay-item" data-overlayid="59" data-time="41">
<p class="vo-question">
Welche Zahl ist die Summe bei 3 + 50 = 53?
</p>
<div class="vtask-choices-wrap">
<div class="vtask-choice-item">
<input class="vtask-choice" type="radio" name="quiz" id="59-a1" value="1" data-correct="0">
<label class="radio-tile" for="59-a1">
<span class="radio-tile-label">
3
</span>
</label>
</div>
<div class="vtask-choice-item">
<input …我使用以下方法使元素全屏显示：
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else {
return;
}
它工作得很好，但我想在全屏模式下显示另一个元素。
另一个元素有position: fixed和z-index: 999999999，但在全屏模式下不可见。
有人可以帮我吗？
下面是示例的链接
https://stackblitz.com/edit/web-platform-z1phjd?file=index.html
所以我想当红色元素全屏大小时显示蓝色元素。
css ×2
html ×2
javascript ×2
css3 ×1
fullscreen ×1
html5 ×1
html5-video ×1
video.js ×1
z-index ×1