4

因此，假设您正在使用 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 上它根本不可见。

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

4

1 回答 1

0

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

于 2015-06-15T18:40:41.767 回答