HTML5 full screen (fullscreen) API detailed description

Lost name body: [Increase decrease] Source: Internet time: 04-24 15:49:31 I want to comment.

This article mainly introduces the HTML5 full-screen (fullscreen) API detailed introduction, this article gives the start Full screen mode and exit full Screen mode code example, while explaining the fullscreen properties and events, the need for friends can refer to the next

In more and more real Web applications, JavaScript is becoming more and more power.

The fullscreen API is a new JavaScript API that is simple and powerful. Fullscreen allows us to programmatically request full-screen display to the user and, if the interaction is complete, can exit the full-screen state at any time.

Online demo Demo:fullscreen API Example

(In this demo, you can launch, Hide, and dump display related properties, you can view the log information through Chrome's console.)

Start Full Screen mode

The full-screen API Requestfullscreen method still uses a prefix-style method name in some older browsers, so it may be necessary to make a detection decision:
(prefixed, meaning that each browser core is not generic.)

Copy CodeThe code is as follows:
Find a supported method, using an element call that requires full-screen
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 fullscreen in a browser that supports fullscreen
Entire page
Launchfullscreen (document.documentelement);
An element
Launchfullscreen (document.getElementById ("videoelement"));

A DOM element that requires full-screen display as a parameter is called to allow the window to go full-screen, sometimes requiring user consent (browser itself and user interaction), and if the user rejects it, a variety of incomplete fullscreen may occur.

If the user agrees to go full screen, the toolbar and other browser components are hidden so that the document frame's width and height span the entire screen.

Exit Full Screen mode

Use the Exitfullscreen method to leave the browser out of full screen and return to the original layout. This method also supports the prefix method on some older browsers.

Copy CodeThe 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 to exit Full screen Method!
Exitfullscreen ();
Note: Exitfullscreen can only be called through the Document object--rather than using normal DOM element.

Fullscreen Properties and Events

A bad news, so far, full-screen events and methods are still prefixed, the good news is that the mainstream browser will soon be supported.

1.document.fullscreenelement: Elements element that is currently in full-screen state.
2.document.fullscreenenabled: Marks whether Fullscreen is currently available.

The Fullscreenchange event is triggered when the full-screen mode is entered/exited:

Copy CodeThe code is as follows:
var fullscreenelement =
Document.fullscreenenabled
|| Document.mozfullscreenelement
|| Document.webkitfullscreenelement;
var fullscreenenabled =
Document.fullscreenenabled
|| Document.mozfullscreenenabled
|| document.webkitfullscreenenabled;
When you initialize a full-screen method, you can detect which event you need to listen to.

Fullscreen CSS

The browser provides some useful fullscreen CSS control rules:

Copy CodeThe 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 handling, so you may need the code above when dealing with multimedia.

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 called MDN's Bananabread demo, which was a great example of using full-screen mode.

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

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

HTML5 full screen (fullscreen) API detailed description