HTML5 full-screen API

Translated by: Tie
Original Article Date: January 1, December 23, 2013
Translated on: February 1, December 29, 2013
Original article: Fullscreen API

JavaScript is becoming more and more powerful 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:
(PrefixThat is, the kernel of Each browser is not universal .)

// Find the Supported Method and call function launchFullScreen (element) {if (element. requestFullscreen) {element. requestFullscreen ();} else if (element. required requestfullscreen) {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 // launchfullscreen(document.doc umentElement) on the entire page; // 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.

// Exit fullscreenfunction exitFullscreen () {if (document. exitFullscreen) {document. exitFullscreen ();} else if (document. extends exitfullscreen) {document. extends 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.
Document. fullscreenElement: element.doc ument. fullscreenabled, the element currently in full screen status, indicates whether fullscreen is currently available. When entering/exiting full screen mode, the fullscreenchange event is triggered:

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 you want to listen.

Fullscreen CSS
The browser provides some useful fullscreen CSS control rules:

/* 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!