How to use the HTML5 full screen API (using the HTML5 fullscreen interface)

Original link: http://www.sitepoint.com/use-html5-full-screen-api/

If you don't like things that change too quickly, web development may not be for you. I had an introduction to the Full-screen API at the end of 2012, and at the time it was mentioned that its implementation details might be modified, but I didn't think I needed to rewrite it a year later! The content of this article may not be up to date, but thank David Storey for helping me to focus on recent technological changes ....

What is the Full-screen API?

This API enables a single element to be displayed in full screen. Unlike pressing the F11 key to force the browser to fullscreen, the goal of this API is to run pictures, videos, and games in a container. When you enter full-screen mode, a message informs the user to press the ESC key at any time to return to the page.

This full-screen API is now supported by mainstream desktop browsers (including IE11). There are a few support on mobile devices, but these browsers are mostly full-screen. Unfortunately, in different browsers, the different subtle performance awaits us to solve ...

The JavaScript API

Let's say we have an image with an ID of myimage, and we'll let it show up full screen. The properties and methods that need to be used are:

document.fullscreenenabled ( had changed )

This property returns True if document allows full-screen mode. It can be used to detect whether the browser supports full-screen mode:

    if (document.fullscreenenabled) {...}

The "S" in the previous implementation is capitalized, and Firefox still needs to be capitalized. The result of adding a prefix is to produce a large cross-browser code:

Full-sreen availableif (   document.fullscreenenable| |   document.webkitfullscreenenabled| |   document.mozfullscreenenabled| |   document.msfullscreenenabled) {...}

Opera 12 is the only one that does not need a prefix, except that opera15+ uses WebKit.

Element.requestfullscreen () ( changed )

This method allows a single element to be fullscreen, for example:

document.getElementById ("MyImage"). Requestfullscreen ();

Similarly, "s" in "screen" becomes the lowercase. Here's the cross-browser code:

var i = document.getElementById ("MyImage"); Go full-screenif (i.requestfullscreen) {    i.requestfullscreen ();} else if (I.webkitrequestfullscreen) {    I.webkitrequestfullscreen ();} else if (i.mozrequestfullscreen) {    i.mozrequestfullscreen ();} else if (I.msrequestfullscreen) {    I.msrequestfullscreen ();}

document.fullscreenelement () ( changed )

This property returns the element that is currently full-screen, and returns NULL when it is not full-screen:

if (document.fullscreenelement) {...}

"Screen" is now in lowercase. The cross-browser code is as follows:

is we full-screen?if (    document.fullscreenelement | |    document.webkitfullscreenelement | |    document.mozfullscreenelement | |    document.msfullscreenelement) {...}

Document.exitfullsreen ( had changed )

This method is used to cancel full-screen mode:

Document.exitfullscreen;

In the same way, "screen" becomes lowercase again, and it is still used for Cancelfullscreen,firefox. The cross-browser code is as follows:

Exit full-screenif (Document.exitfullscreen) {    document.exitfullscreen ();} else if ( Document.webkitexitfullscreen) {    document.webkitexitfullscreen ();} else if (Document.mozcancelfullscreen) {    Document.mozcancelfullscreen ();} else if (document.msexitfullscreen) {    document.msexitfullscreen ();}

Document.fullscreenchange Events

This event is triggered when the full-screen mode is entered or exited. This event does not provide any information, but you can determine whether a full screen can be done by document.fullscreenelement NULL.

Document.addeventlistener ("Fullscreenchange", function () {...});

The name doesn't change, but we also need a cross-platform prefix and an IE hump prefix:

Document.addeventlistener ("Fullscreenchange", Fshandler);d ocument.addeventlistener ("Webkitfullscreenchange", Fshandler);d Ocument.addeventlistener ("Mozfullscreenchange", Fshandler);d Ocument.addeventlistener (" Msfullscreenchange ", Fshandler);

Document.fullscreenerror Events

Full-screen operation may fail. For example, IFRAMEs does not have a allowFullScreen attribute or is displayed as a window may cause a conflict. So a fullscreenerror may be triggered:

Document.addeventlistener ("Fullscreenerror", function () {...});

The name doesn't change, but we also need a cross-platform prefix and an IE hump prefix:

Document.addeventlistener ("Fullscreenerror", Fserrorhandler);d ocument.addeventlistener ("Webkitfullscreenerror", Fserrorhandler);d Ocument.addeventlistener ("Mozfullscreenerror", Fserrorhandler);d Ocument.addeventlistener (" Msfullscreenerror ", Fserrorhandler);

Full-screen CSS

We can also affect fullscreen in CSS style ...

: Fullscreen (pseudo Class) Pseudo-Class ( changed )

You can apply this style to an element or to its children, which is valid when displayed in full-screen mode:

: fullscreen {    ...}

The previous name was: Full-sreen, and WebKit and Firefox still let them use it. The cross-browser code is as follows:

:-webkit-full-screen {}:-moz-full-screen {}:-ms-fullscreen {}: fullscreen {}

:: Backdrop ( new )

You can apply the color and picture backgrounds to the elements under different resolution displays in full screen mode:

: fullscreen::backdrop {    background-color: #006;/* dark blue */}

Backdrop is the pseudo-element behind the fullsreen element, but it is the content on other pages. IE11 provided support, but Firefox and Opera12 did not. Chrome,safari and opera15+ contain the backdrop element, but it is not allowed to be styled. Currently, you can only target IE11, such as:

:-ms-fullscreen::-ms-backdrop {    background-color: #006;/* dark blue */}

Style Differences

In Ie11,firefox and Opera12, the Full-sreen element is set to 100% and high. So the imagey will be stretched, ignoring its aspect ratio. Setting the height and width in IE11 causes the full-screen element to be placed in the upper-left corner, and a black background (:: Backdrop configured). Opera12 and IE11 are similar, but the background is transparent. Firefox ignores its size. Full-screen elements in Chrome,safari and opera15+ are placed in the center of a black background.

If you want to maintain consistency, you can scale the Webkit/blink browser to FIREFOX/IE11:

:-webkit-full-screen {    position:fixed;    width:100%;    top:0;    Background:none;}

You can also let IE11, like Webkit/blink, put full-screen elements in the center:

:-ms-fullscreen {  width:auto;  Height:auto;  Margin:auto;}

This method is not available for Firefox because it ignores width and height, as mentioned before. The solution is that you need to make the parent element of this element full screen and apply it to the appropriate dimensions, such as: shown in thisdemonstration.

Ready for Deployment?

The HTML5 Full-sreen API is relatively simple, but browser differences lead to ugly code, and there is no guarantee that they will not change. This can be improved, so it is best to devote most of your time and energy to other features and features until the API becomes more stable.

This means that full-sreen can be used for HTML5 games and video sites. If you don't want to maintain your code yourself, you can use a class library like Screenfull.js, which can smooth out these differences, Beast of luck!

Reprint Please specify: Come to the micro-daylight Day

Front End Technology Group: 139761568

How to use the HTML5 full screen API (using the HTML5 fullscreen interface)