相关疑难解决方法(0)

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

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

覆盖HTML5全屏视频

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

我正在使用 videojs 来播放视频，并且我对视频内容逐帧进行了一些操作并将其显示在<canvas>（ID：“显示”）中。

视频播放时，可以用下面的css<canvas>显示在前面。<video>

<style type="text/css">
    canvas#display {
        z-index: 1;
        postion: relative;
        top: some-video-height-px;
    }

    video#videoDiv_html5_api {
        z-index: -2;
    }

    div.vjs-controls {
        z-index: 3;
    }

</style>

进入全屏模式时，该属性似乎z-index不起作用。<video>它保持在前面并且<canvas>不能覆盖<video>

在 W3C 文档中 https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#ui

我们有

:fullscreen {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:2147483647;
  box-sizing:border-box;
  margin:0;
  width:100%;
  height:100%;
}

看来 z-index 已设置为Integer.MAX_VALUE...

我使用以下方法使元素全屏显示：

if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} else {
  return;
}

它工作得很好，但我想在全屏模式下显示另一个元素。

另一个元素有position: fixed和z-index: 999999999，但在全屏模式下不可见。

有人可以帮我吗？

下面是示例的链接

https://stackblitz.com/edit/web-platform-z1phjd?file=index.html

所以我想当红色元素全屏大小时显示蓝色元素。