js全屏退出全屏

背景:

video播放器默认的全屏后层级太高,想在视频全屏后在视频上方展示其他内容无法实现,看网上说的z-index取比video全屏默认最大的z-index=2147483647 更大就行 ,但是我试了之后还是没有效果,只能换种思路了,目前是禁用video自带的控制条,自定义控制条(video和想要在视频上方展示的div都要在设置全屏的div之下),可以实现想要的效果。不知道还有没有其他好的方法。

由于是做实时直播,所以进度条暂停那些的我就不用了,只写了全屏和退出全屏

js实现全屏和退出全屏

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%"});

 }

猜你喜欢

转载自blog.csdn.net/weixin_42217154/article/details/114383355