有没有办法覆盖< canvas>通过全屏HTML5< video>？ [英] Is there a way to overlay a <canvas> over a fullscreen HTML5 <video>?

问题描述

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

I'm using videojs to play video, and I've done some manipulation on the video content frame by frame and display it in a <canvas> (ID: 'display').

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

When the video is playing, <canvas> can display in front of the <video> with the following 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>

It seems that z-index attribute is not working when <video> enters full screen mode. It keeps in the front and <canvas> cannot overlay over <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 ...

It seems that z-index has been set to the Integer.MAX_VALUE...

推荐答案

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

I find the answer myself. you just need to set the canvas.style.z-index to be 2147483647, then the will cover

这篇关于有没有办法覆盖< canvas>通过全屏HTML5< video>？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！