HTML5 API Detailed (1): Fullscreen full Screen mode

fullscreen API Interface

Property 1:fullscreenelement This property returns the DOM element that is currently in full-screen mode.

Property 2:fullscreenenabled This property returns whether the current document has entered a state that can request full-screen mode.

Method 1:Requestfullscreen () requests into full-screen mode.

Method 2:exitfullscreen () Exits full-screen mode.

Event 1:Fullscreenchange is triggered when entering/exiting full-screen mode switching.

Event 2:Fullscreenerror is triggered when it fails to enter/exit full screen mode.

Because of browser compatibility issues with the fullscreen API, we need to do cross-browser processing when we use it, and refer to the code:

Returns elements that are in full screen across browsers

function Fullscreenelement () {

var Fullscreenele = Document.fullscreenelement | |

document.mozfullscreenelement | |

Document.webkitfullscreenelement;

Note: To get full screen elements after the user authorizes full screen, otherwise fullscreenele is null

Console.log ("Full screen element:" +fullscreenele);

return fullscreenele;

}

Returns whether the current document has entered a state that can request full-screen mode across browsers

function fullscreenenable () {

var isfullscreen = document.fullscreenenabled | |

Window.fullscreen | |

Document.webkitisfullscreen | |

document.msfullscreenenabled;

Note: To get the current status exactly after the user authorizes full screen

if (IsFullScreen) {

Console.log (' Full screen mode ');

}else{

Console.log (' Non-full-screen mode ');

}

}

Launch fullscreen across browsers

function Lanchfullscreen (Element) {

if (Element.requestfullscreen) {

Element.requestfullscreen ();

}

else if (Element.mozrequestfullscreen) {

Element.mozrequestfullscreen ();

}

else if (Element.msrequestfullscreen) {

Element.msrequestfullscreen ();

}

else if (Element.webkitrequestfullscreen) {

Element.webkitrequestfullscreen ();

}

}

Exit fullscreen across browsers

function Exitfullscreen () {

if (Document.exitfullscreen) {

Document.exitfullscreen ();

}

else if (Document.mozcancelfullscreen) {

Document.mozcancelfullscreen ();

}

else if (Document.msexitfullscreen) {

Document.msexifullscreen ();

}

else if (Document.webkitcancelfullscreen) {

Document.webkitcancelfullscreen ();

}

}

Fullscreenchange event handling for each browser

Document.addeventlistener (' Fullscreenchange ', function () {/*code*/});

Document.addeventlistener (' Webkitfullscreenchange ', function () {/*code*/});

Document.addeventlistener (' Mozfullscreenchange ', function () {/*code*/});

Document.addeventlistener (' Msfullscreenchange ', function () {/*code*/});

Fullscreenerror event handling for each browser

Document.addeventlistener (' Fullscreenerror ', function () {/*code*/});

Document.addeventlistener (' Webkitfullscreenerror ', function () {/*code*/});

Document.addeventlistener (' Mozfullscreenerror ', function () {/*code*/);

Document.addeventlistener (' Msfullscreenerror ', function () {/*code*/});

Style code in full-screen mode across browsers

:-webkit-full-screen {}

:-moz-full-screen {}

:-ms-fullscreen {}

: fullscreen {}

HTML5 API Detailed (1): Fullscreen full Screen mode