js full screen exit full screen

background:

The default full screen level of the video player is too high. If you want to display other content on the top of the video after the video is full screen, it is impossible to see the z-index on the Internet that is larger than the default maximum z-index=2147483647 of the video full screen, but I After trying it, it still has no effect. I can only change the way of thinking. Currently, the control bar that comes with the video is disabled, and the custom control bar (video and the div that you want to display above the video must be under the full-screen div). You can achieve the desired effect. I don't know if there are other good methods.

Since it’s a real-time live broadcast, I don’t need to pause the progress bar. I just wrote full screen and exit full screen.

js realizes full screen and exits full screen

function requestFullScreen(ele) {//全屏
    $("#"+ele+" .videoMap").show();
    var element = document.getElementById(ele);
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
    requestMethod.call(element);
    //全屏之后的显示样式
    $("#"+ele+" .vjs-tech").css({"width": $("#"+ele).width()+"px","height": "100%"});
    
 };

// 退出全屏
function exitFullscreen(ele) {
    $("#"+ele+" .videoMap").hide();
    var elem = document;
    var elemd = document.getElementById(ele);
  if (elem.webkitCancelFullScreen) {
   elem.webkitCancelFullScreen();
  } else if (elem.mozCancelFullScreen) {
   elemd.mozCancelFullScreen();
  } else if (elem.cancelFullScreen) {
   elem.cancelFullScreen();
  } else if (elem.exitFullscreen) {
   elem.exitFullscreen();
  } else {
   //浏览器不支持全屏API或已被禁用
  };
 
  /*
   退出全屏后样式还原
   */
    $("#"+ele+" .vjs-tech").css({"width": $("#"+ele).width()+"px","height": "100%"});

 }