如何在全屏视频的顶部显示我的自定义 HTML 视频控件(或 div)?

Question

在过去的两个小时里，我一直在寻找解决方案，但还没有找到。我有两个javascript函数：

function fullScreen() {
if (vid.requestFullScreen) vid.requestFullScreen();
else if (vid.webkitRequestFullScreen) vid.webkitRequestFullScreen();
...
}

另一个用于退出全屏模式。 但是，我似乎无法使用视频上的双击事件侦听器退出全屏模式，无论我尝试什么，我都无法在全屏模式下显示我的视频控件。我在一个名为"player_box"的div 中有一个视频和一个div(控件(。当我尝试提高 z 值并将控件div 更改为绝对值时，它对div 没有可察觉的影响。

<div id="player_box">
<video id="my_video">
<source src="test2.mp4">
</video>
<div id="controls_bar">
<a href="#" title="Play/Pause" class="tooltip"><span title=""><button id="playPause"></button></span></a>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<span id="curtimecode">00:00</span> / <span id="endtimecode">00:00</span>
<a title="Mute/Unmute" class="tooltip"><span title=""><button id="mutebtn"></button></span></a>
<input id="soundslider" type="range" min="0" max="100" value="100" step="1">
<a title="Fullscreen" class="tooltip"><span title=""><button id="fullbtn"></button></span></a>
</div>
</div>

目前我只能在"正常模式"下与视频交互，我可以使用事件侦听器和视频控件，但是一旦它变为全屏，我就无法与之交互。我必须重新加载页面或按 Esc/F11。

更新： 您可以在全屏模式下使用事件侦听器，我输入了错误的元素，这就是它不起作用的原因。不过，最初的问题仍然存在。

Answer 1

requestFullScreen()API 可以应用于任何 HTML DOM 元素，而不仅仅是<video>标记。

现在，您将视频元素本身设置为全屏，因此这就是全屏显示的内容。

您希望包含自定义控件，因此将同时包含视频和这些控件的父元素设置为全屏：

function fullScreen() {
var vidContainer = document.getElementById("player_box"); // instead of #my_video
if (vidContainer.requestFullScreen) vidContainer.requestFullScreen();
else if (vidContainer.webkitRequestFullScreen) vidContainer.webkitRequestFullScreen();
// ...
}

您确实需要设置全屏节点中包含的元素的 CSS，以便它们实际填充全屏区域(100% 宽度和高度等(。如有必要，您可以在大多数浏览器中使用:fullscreen伪类在进入和退出全屏模式时设置不同的样式：

#player_box:fullscreen {position:relative}
#player_box:fullscreen #my_video {width: 100vw; height: 100vh}
#player_box:fullscreen #controls_bar {bottom: 0}

(...虽然现在我仔细观察，对这个伪类的支持并不完整;有些浏览器改用:full-screen，有些则根本不支持它。 在触发全屏时，最好将新的类名切换到元素上，并以此为基础进行全屏规则 - 即为#player_box和#player_box.isFullscreen设置css规则，并在需要时将.isFullscreen切换到元素上。