有没有办法将 <canvas> 覆盖在全屏 HTML5 <video> 上？

Question

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

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

<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>

<video> 进入全屏模式时，z-index 属性似乎不起作用。 它保持在前面，<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...

Answer 1

我自己找到答案。您只需将canvas.style.z-index 设置为2147483647，然后将覆盖