The code copy is as follows:
//Judge various browsers and find the correct method
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// Start full screen!
launchFullScreen(document.documentElement); // The entire web page
launchFullScreen(document.getElementById("videoElement")); // A page element
Call the full screen method on the page elements you want to display in full screen, and the browser window will become full screen, but the user will first request to allow full screen mode. Be aware that users are likely to reject full screen mode. If the user runs full screen mode, the browser's toolbar and other button menus will be hidden and your page will cover the entire screen.
Exit full screen mode
This exitFullscreen method (which also requires a browser prefix) will cause the browser to exit full screen mode and become normal mode.
The code copy is as follows:
// Determine browser type
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// Exit full screen mode!
exitFullscreen();
It should be noted that exitFullscreen can only be called by the document object, rather than the object passed in when starting full screen.
Full screen properties and events
Unfortunately, the full screen properties and related methods for events also require the browser prefix, but I believe this will not be needed soon.
1.document.fullScreenElement: Full screen web page element.
2.document.fullScreenEnabled: determines whether it is currently in full screen.
The fullscreenchange event will be triggered when fullscreen is started or exited:
The code copy is as follows:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
You can still prefix this event using the above method to determine the browser type.
Full screen style CSS
Various browsers provide a very useful css style rule in full screen mode:
Copy the code as follows::-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 */
}
In some cases, there are some problems with WebKit styles, and you'd better keep these styles simple.
These full-screen APIs are super simple and super useful. The first time I saw this API in MDN's BananaBread demo, it was a shooting game that just happened to be full-screen, which used event listening to detect full-screen state. Remember these useful APIs, you can pick them up when you need them.