JavaScript Fullscreen API: full screen operation
The full-screen API can control the full-screen display of the browser, allowing an Element node (and sub-nodes) to occupy the entire screen of the user. At present, the latest versions of all major browsers support this API (including IE11), but you need to add the browser prefix when using it.
method
requestFullscreen()
The requestFullscreen method of the Element node can make the node full screen.
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"));
Firefox and Chrome behave slightly differently when zooming in on a node. Firefox automatically adds a CSS rule to the node to enlarge the element to the full screen state, width: 100%; height: 100%while Chrome puts the node in the center of the screen, keeping the original size, and turning the other parts black. To make Chrome behave the same as Firefox, you can customize a CSS rule.
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}
exitFullscreen()
The exitFullscreen method of the document object is used to cancel the full screen. The method is also prefixed with the browser.
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();
The user can also exit the full screen key by manually pressing the ESC key or the F11 key. In addition, loading a new page, or switching tabs, or switching from the browser to another application (pressing Alt-Tab), will also cause the exit of the full screen state.
Attributes
document.fullscreenElement
The fullscreenElement property returns the Element node that is in full screen state, or null if no node is currently in full screen state.
var fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
document.fullscreenEnabled
The fullscreenEnabled property returns a Boolean value indicating whether the current document can be switched to full screen.
var fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;
if (fullscreenEnabled) {
videoElement.requestFullScreen();
} else {
console.log('浏览器当前不能全屏');
}
full screen event
The following events are related to full screen operations.
-
fullscreenchange event: Triggered when the browser enters or leaves full screen.
-
fullscreenerror event: Triggered when the browser cannot enter the full screen, which may be due to technical reasons or user rejection.
document.addEventListener("fullscreenchange", function( event ) {
if (document.fullscreenElement) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
});
When the fullscreenchange event occurs in the above code, it is judged by the fullscreenElement attribute whether to enter full screen or exit full screen.
CSS for fullscreen state
In full screen state, CSS of most browsers supports :full-screenpseudo-classes, only IE11 supports :fullscreenpseudo-classes. Using this pseudo-class, it is possible to set individual CSS properties for the fullscreen state.
:-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%;
}