5

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').

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>

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>

In W3C Documents https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#ui

we have

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

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

Kevin Tong
  • 3,626
  • 1
  • 17
  • 12

1 Answers1

0

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

Kevin Tong
  • 3,626
  • 1
  • 17
  • 12
  • I'm curious which web browser you were using here. This solution should not work with Safari since full screen mode launches a native video playback client which hides the web browser and thus supersedes any and all elements within the browser regardless of z-index value. – natlee75 Sep 25 '12 at 20:43
  • Hmm... are you using the original webkitEnterFullscreen method of engaging full screen mode or the newer, "correct" webkitRequestFullScreen? – natlee75 Sep 25 '12 at 20:44
  • 1
    I'm using Chrome running on Windows. On mac, quicktime should be called according to my experience on iOS. I've no idea what version of method I'm using... – Kevin Tong Sep 27 '12 at 02:13