我正在使用 videojs 播放视频,我对视频内容逐帧进行了一些操作,并将其显示在 <canvas>
中。 (ID:'显示')。
播放视频时,<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>
似乎z-index
<video>
时属性不起作用进入全屏模式。
它保持在前面和<canvas>
无法覆盖 <video>
In W3C Documents 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
...
最佳答案
我自己找到了答案。你只需要将canvas.style.z-index
设置为2147483647,然后就会覆盖
关于javascript - 有没有办法将 <canvas> 覆盖在全屏 HTML5 <video> 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9461453/