欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何优雅的全屏

程序员文章站 2022-07-07 20:53:05
因为工作需要,我们的直播平台需要全屏模式,这个全屏不是video的全屏,是自己定制的全屏。 那么这里就遇到了一系列的问题,因为f11 和esc都可以取消全屏,而f11还可以进入全...

因为工作需要,我们的直播平台需要全屏模式,这个全屏不是video的全屏,是自己定制的全屏。
那么这里就遇到了一系列的问题,因为f11 和esc都可以取消全屏,而f11还可以进入全屏。
但是此全屏和我们需要的全屏还不是同一种。
反正很麻烦。

下面上代码,重点是实现的思路,而并不是代码,后面会讲思路

全屏检测函数,是否支持全屏

export function isfullscreen() {
  let isfull =
    document.fullscreenenabled ||
    window.fullscreen ||
    document.webkitisfullscreen ||
    document.msfullscreenenabled;

  //to fix : false || undefined == undefined
  if (isfull === undefined) isfull = false;
  return isfull;
}

开启和取消全屏

/*全屏*/
export function enterfullscreen() {
  let docelm = document.documentelement;

  //w3c
  if (docelm.requestfullscreen) {
    docelm.requestfullscreen();
  }
  //firefox
  else if (docelm.mozrequestfullscreen) {
    docelm.mozrequestfullscreen();
  }
  //chrome等
  else if (docelm.webkitrequestfullscreen) {
    docelm.webkitrequestfullscreen();
  }
}

/*取消全屏*/
export function exitfullscreen() {
  if (document.exitfullscreen) {
    document.exitfullscreen();
  } else if (document.mozcancelfullscreen) {
    document.mozcancelfullscreen();
  } else if (document.webkitcancelfullscreen) {
    document.webkitcancelfullscreen();
  } else if (document.msexitfullscreen) {
    document.msexitfullscreen();
  }
}

下面,重点来了,我们最好不要在全屏函数中写 全屏样式切换的代码,

这会带来一些错乱的问题,而且,用户会看到页面元素乱一下,然后又重新布局好,这种体验很差。

所以,我们在监听回调函数中写我们的全屏、分屏样式切换代码

 addscreenchangelistener(){
    document.addeventlistener("fullscreenchange", ()=> {
       //在这里写分屏、全屏切换代码
    }, false);
  
    document.addeventlistener("mozfullscreenchange",  ()=> {
        //在这里写分屏、全屏切换代码
    }, false);
  
    document.addeventlistener("webkitfullscreenchange", ()=>  {
       //在这里写分屏、全屏切换代码
    }, false);
  }

ok,当然,其中还有些技巧,是因为我是用的react,异步刷新的问题,

这里就不赘述了,如果有人遇到同样的问题,欢迎交流。