requestFullscreen 多个元素

Question

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

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

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

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

我试图找出全屏模式是否仅限于单个元素（及其子元素），或者是否可以同时拥有多个全屏元素。还有其他人遇到过类似的事情吗？有什么解决方法吗？

Answer 1

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