javascript - 多个元素的请求全屏

Question

假设您正在使用 HTML5 视频播放器库，例如 Videojs。你想通过添加一个额外的按钮来扩展这个库的功能，但是由于与这个问题无关的原因，你不想进入整个插件编码业务，所以你只需将播放器放在一个容器中并添加一个绝对定位的按钮，例如:

<div class="player-container">
  <video class="video-js"></video>
  <button type="button" class="absolutely-positioned"></button>
</div>

问题是，在某些时候您可能会单击播放器的全屏按钮，这将调用视频元素上的 requestFullscreen 并且仅调用视频元素。这意味着您的按钮或该容器上的任何其他内容都不会处于全屏模式。

在 webkit 浏览器上，您可以通过将 z-index 设置为等于或高于全屏模式下视频元素的值，使其他元素在全屏模式下保持可见。在 Firefox 上，该元素需要更改为 position: fixed(但您不能使用 -moz-full-screen 前缀来设置它的样式，因为该元素不是被识别为处于全屏模式)并且在 IE 上它根本不可见。

我正在尝试确定全屏模式是否仅限于单个元素(及其子元素)，或者是否可以同时拥有多个全屏元素。有没有其他人为类似的事情而苦苦挣扎？有任何解决方法吗？

Answer 1

在检查维基百科的新图像查看器(全屏后显示按钮)后，我似乎找到了解决方案。 z-index 确实发挥了作用，但诀窍似乎是在包含您的媒体及其自定义控制元素的容器元素上调用 requestFullscreen。