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

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

If you don't like things that change too fast, web development might not be for you.

I wrote about the Full-screen API at the end of 2012, and at the time I mentioned the fact that details might be changed, but I didn't think I'd have to rewrite it a year later! The content of this article may not be up to date. But thanks to David Storey for helping me 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 perform pictures, videos, and games in a container. When you enter full-screen mode. A message will appear informing the user that they can return to the page at any time by pressing the ESC key.

This full-screen API is now supported by mainstream desktop browsers (including IE11). There is a small amount of support on mobile devices. But these browsers are basically full-screen displays. Unfortunately, the different nuances on different browsers await us to solve ...

The JavaScript API

If 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 the document agrees with full-screen mode. It can be used to detect whether the browser supports full-screen mode:

    if (document.fullscreenenabled) {...}

The previous implementation of "screen" of "S" is uppercase, and Firefox still need to capitalize.

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 require a prefix. In addition to opera15+ use WebKit.

Element.requestfullscreen () ( changed )

This method allows a single element to be fullscreen, such as:

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

In the same way, "s" in "screen" becomes the lowercase. The following are 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.

Cross-browser code such as the following:

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, before it is cancelfullscreen. Firefox still uses it. Cross-browser code such as the following:

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 infer whether the full screen is sufficient 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 form of content that may cause conflicts. 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. Only valid when they are displayed in full-screen mode:

: fullscreen {    ...}

The previous name was: Full-sreen. and WebKit and Firefox still make use of it. Cross-browser code such as the following:

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

:: Backdrop ( new )

You can apply color and picture backgrounds to 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's something else on the page. IE11 provided support, but Firefox and Opera12 did not. Chrome,safari and opera15+ included the backdrop element, but did not agree to give it a style. Now. You can only face 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.

Suppose you want to maintain consistency. The ability to scale the Webkit/blink browser to FIREFOX/IE11:

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

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

:-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 have the parent element of this element fullscreen and applied to the appropriate size. such as: shown in thisdemonstration.

Ready for Deployment?

HTML5 Full-sreen API is relatively simple, but browser differences lead to very ugly code, and there is no guarantee that they will not change. This can be improved, so it's 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. Assuming you don't want to maintain your code yourself, you can use the Screenfull.js Library of sorts. It can smoothly transition 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 HTML5 fullscreen interface)