Fullscreen API：全屏操作

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(); } } launchFullscreen(document.documentElement); launchFullscreen(document.getElementById("videoElement"));

:-webkit-full-screen #myvideo {
  width: 100%; height: 100%; }

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(); } } exitFullscreen();

var fullscreenElement =
  document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

var fullscreenEnabled =
  document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled; if (fullscreenEnabled) { videoElement.requestFullScreen(); } else { console.log('浏览器当前不能全屏'); }

document.addEventListener("fullscreenchange", function( event ) { if (document.fullscreenElement) { console.log('进入全屏'); } else { console.log('退出全屏'); } });

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

:-moz-full-screen { /* properties */ } :-ms-fullscreen { /* properties */ } :full-screen { /*pre-spec */ /* properties */ } :fullscreen { /* spec */ /* properties */ } /* deeper elements */ :-webkit-full-screen video { width: 100%; height: 100%; }

转载于:https://www.cnblogs.com/Javi/p/11533107.html