firefox - Firefox 全屏视频附加 DOM 元素

Question

无论我如何将 DOM 中的元素作为 html5 视频的叠加层（静态或动态），Firefox 中的这些元素都是不可见的，尽管 z-index 设置为 2147483647、不透明度 1 和显示块。

查看 2 个类似的答案，在 Chrome 中工作，但在 FF 中没有：

在 HTML5 全屏视频上叠加

显示全屏元素以外的元素（HTML5 全屏 API）

Answer 1

要显示覆盖元素，而不是使视频全屏，使视频元素的父级全屏。

请参阅此处的示例 - https://jsfiddle.net/tv1981/tm069z9c/128/

在以下结构中，我正在制作“容器”全屏

<div id="container">
  <div class="btn-fs" id="btnFS">
    Fullscreen
  </div>
  <div class='logo'>
    Logo Overlay
  </div>
  <video width="100%" height="100%" autoplay muted>
    <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4"> Your browser does not support the video tag.
  </video>
  <div class='footer'>
    This is Test Overlay for Video
  </div>
</div>

JavaScript

fs.addEventListener('click', goFullScreen);

function goFullScreen() {
  var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
    document.webkitFullscreenElement || document.msFullscreenElement;
  if (fullscreenElement) {
    exitFullscreen();
  } else {
    launchIntoFullscreen(document.getElementById('container'));
  }
}

这适用于 Chrome 版本 60.0.3112.101 (Official Build) (64-bit), FireFox Developer Edition 56.0b5 (64-bit)