Detailed introduction to HTML5 Fullscreen API_html5 tutorial skills

In more and more real web applications, JavaScript is becoming more and more powerful.

FullScreen API is a new JavaScript API, simple and powerful. FullScreen allows us to programmatically request full-screen display from the user, and if the interaction is completed, we can exit the full-screen state at any time.

Online Demonstration Demo: Fullscreen API Example

(In this Demo, you can Launch, Hide, and Dump to display related properties, and you can view log information through the chrome console.)

Enable full screen mode

The full-screen API requestFullscreen method still uses the method name with a prefix in some old browsers, so detection and judgment may be required:
(With a prefix, it means that each browser kernel is not universal.)

Copy the code

The code is as follows:

// Find the supported method and use the element that requires full screen Call
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();
}
}


// Launch full screen in a browser that supports full screen
// The entire page
launchFullScreen(document.documentElement);
// An element
launchFullScreen( document.getElementById("videoElement"));

Take the DOM element that needs to be displayed in full screen as a parameter. Calling this method can make the window enter the full screen state. Sometimes the user's consent may be required (the browser itself interacts with the user). If the user refuses, various incompleteness may occur. full screen.

If the user agrees to go full screen, the toolbar and other browser components will be hidden, making the width and height of the document frame span the entire screen.

Exit full screen mode

Use the exitFullscreen method to exit the browser from full screen and return to the original layout. This method also supports the prefix method on some old browsers.

Copy the code

The code is as follows:

// Exit fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document. exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}


// Call the exit full screen method!
exitFullscreen();

Please note: exitFullscreen can only be called through the document object - not Use a normal DOM element.

Fullscreen properties and events

The bad news is that so far, full-screen events and methods are still prefixed. The good news is that soon all major browsers will support them.

1.document.fullscreenElement: The element currently in full-screen state.
2.document.fullscreenEnabled: Mark whether fullscreen is currently available.

When entering/exiting full screen mode, the fullscreenchange event will be triggered:

Copy code

The code is as follows:

var fullscreenElement =
document.fullscreenEnabled
|| document.mozFullscreenElement
|| document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled
|| document.mozFullscreenEnabled
|| document.webkitFullscreenEnabled;

When initializing the full-screen method, you can detect which event needs to be monitored.

Fullscreen CSS

The browser provides some useful fullscreen CSS control rules:

Copy the code

The code is as follows:

/* html */
:-webkit-full-screen {
/* properties */
}
:-moz-fullscreen {
/* properties * /
}


:fullscreen {
/* properties */
}


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


/* styling the backdrop */
::backdrop {
/* properties */
}

In some cases, WebKit requires some special processing, so when dealing with multimedia, you may need the above code.

I think the Fullscreen API is super simple and super useful. The first time I saw this API was in a full-client first-person shooter game called MDN's BananaBread demo, which is really a great way to use full-screen mode. Excellent case.

The full-screen API provides a way to enter and exit full-screen mode, and provides corresponding events to monitor changes in full-screen status, so all aspects are coherent.

Just remember this great API - it will definitely come in handy at some point in the future!