Fullscreen API：全屏操作

[itboos]

 /*
      浏览器全屏API：https://javascript.ruanyifeng.com/htmlapi/fullscreen.html#toc1
      note: :32 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
      出于安全考录必须通过用户一个操作才能触发全屏/取消全屏操作，比如 点击按钮后触发全屏
   */
  // 开启全屏
  function launchFullscreen(element) {
    if(element.requestFullscreen) {
      element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if(element.msRequestFullscreen){
      element.msRequestFullscreen();
    } else if(element.webkitRequestFullscreen) {
      element.webkitRequestFullScreen();
    }
    // 当上面的的代码执行后，第一次返回的全屏元素为空， 如果已经在全屏的状态的时候,就会返回当前全屏的元素
    var fullscreenElement =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
    console.log('全屏状态：', fullscreenElement);
  }
  // launchFullscreen(document.documentElement);
  // 点击文档开启全屏
  document.onclick = function() {
    launchFullscreen(document.getElementById("my-video"));
  };
    // 关闭全屏
  function exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }

  // 双击文档关闭全屏
  document.ondblclick= function() {
    exitFullscreen();
  };

  // 全屏事件:
  // fullscreenchange事件：浏览器进入或离开全屏时触发。
  // fullscreenerror事件：浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝。
  document.addEventListener("fullscreenchange", function( event ) {
    console.log(e);
    if (document.fullscreenElement) {
      console.log('进入全屏');
    } else {
      console.log('退出全屏');
    }
  });

    
// 全屏状态的CSS:
:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
video:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

参考链接：
https://javascript.ruanyifeng.com/htmlapi/fullscreen.html#toc1
https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement