Firefox全屏视频附加DOM元素

Question

无论我如何将DOM中的元素作为html5视频上的叠加(静态或动态),Firefox中的这些元素都不可见,尽管z-index设置为2147483647,不透明度为1和显示块.

看到2个类似的答案,在Chrome中工作,但不在FF中:

覆盖HTML5全屏视频

显示全屏元素以外的元素(HTML5全屏API)

Answer 1

若要显示叠加元素,而不是使视频全屏,请将视频元素全屏设为全屏.

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

在以下结构中,我正在制作"容器"全屏

<div id="container">
  <div class="btn-fs" id="btnFS">
    Fullscreen
  </div>
  <div class='logo'>
    Logo Overlay
  </div>
  <video width="100%" height="100%" autoplay>
    <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.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(官方版本)(64位),FireFox开发人员版56.0b5(64位)