Launching Fullscreen Mode
// Find the right method, call on correct element function launchIntoFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); } } // Launch fullscreen for browsers that support it! launchIntoFullscreen(document.documentElement); // the whole page launchIntoFullscreen(document.getElementById("videoElement")); // any individual element
Exiting Fullscreen Mode
// Whack fullscreen function exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } // Cancel fullscreen for browsers that support it! exitFullscreen();
Fullscreen Properties & Events
- document.fullScreenElement: the element which has been pushed to fullscreen.
- document.fullScreenEnabled: notes if fullscreen is current enabled.
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
Fullscreen CSS
Browsers do provide us one helpful bit of fullscreen CSS control:
:-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%; } /* styling the backdrop*/ ::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ }
时间: 2024-10-10 03:58:29