有沒有辦法覆蓋一個 <canvas> 通過全屏HTML5 <video> ？

Question

我正在使用videojs來播放視頻，我已逐幀對視頻內容進行了一些操作，並將其顯示在<canvas> （ID：'display'）中。

播放視頻時， <canvas>可以使用以下css顯示在<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>

當<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，然后將覆蓋