HTML5 full screen API details _ html5 tutorial skills-

This article mainly introduces the full screen HTML5 API in detail. This article provides sample code for starting full screen mode and exiting full screen mode, and explains the Fullscreen attributes and events, for more information, see JavaScript in more and more real web applications.

FullScreen API is a new JavaScript API, which is simple and powerful. FullScreen allows us to request full screen display to users through programming. If the interaction is complete, we can exit full screen at any time.

Online Demo: Fullscreen API Example

(In this Demo, Launch, Hide, and Dump can be used to display related attributes. You can view log information on the chrome console .)

Enable full screen mode

The full-screen API requestFullscreen method still uses a method name with a prefix in some old browsers. Therefore, it may need to be checked and determined:
(With a prefix, meaning that each browser kernel is not universal .)

The Code is as follows:

// Find the Supported Method and call it using the element that requires full screen
Function launchFullScreen (element ){
If (element. requestFullscreen ){
Element. requestFullscreen ();
} Else if (element. inclurequestfullscreen ){
Element. Required requestfullscreen ();
} Else if (element. webkitRequestFullscreen ){
Element. webkitRequestFullscreen ();
} Else if (element. msRequestFullscreen ){
Element. msRequestFullscreen ();
}
}


// Enable full screen in a browser that supports full screen
// The entire page
LaunchFullScreen(document.doc umentElement );
// An element
LaunchFullScreen (document. getElementById ("videoElement "));

Use the DOM element that needs to be displayed in full screen as a parameter. Call this method to enable the window to enter the full screen state. Sometimes the user may have to agree (the browser interacts with the user). If the user refuses, A variety of incomplete full screen may appear.

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

Exit full screen mode

The exitFullscreen method can be used to exit the browser from full screen and return the original layout. This method also supports the prefix method in some old browsers.

The Code is as follows:

// Exit fullscreen
Function exitFullscreen (){
If (document. exitFullscreen ){
Document. exitFullscreen ();
} Else if (document. extends exitfullscreen ){
Document. Define exitfullscreen ();
} Else if (document. webkitExitFullscreen ){
Document. webkitExitFullscreen ();
}
}


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

Note: exitFullscreen can only be called through the document Object -- instead of using a common DOM element.

Fullscreen attributes and events

A bad message. So far, full-screen events and methods still have prefixes. The good news is that mainstream browsers will soon support these events.

1.doc ument. fullscreenElement: element in full screen status.
2.doc ument. fullscreenabled: Indicates whether fullscreen is currently available.

When you enter/exit full screen mode, the fullscreenchange event is triggered:

The Code is as follows:

Var fullscreenElement =
Document. fullscreenEnabled
| Document. inclufullscreenelement
| Document. webkitFullscreenElement;
Var fullscreenEnabled =
Document. fullscreenEnabled
| Document. inclufullscreenenabled
| Document. webkitFullscreenEnabled;

When initializing the full screen method, you can detect which event you want to listen.

Fullscreen CSS

The browser provides some useful fullscreen CSS control rules:

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 processing multimedia, you may need the above Code.

I think Fullscreen API is super simple and extremely useful. the first time I saw this API was in a full-client first-person shooting game named MDN's BananaBread demo. This is an excellent case in full screen mode.

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

Remember this good API-it will certainly come in handy at some point in the future!