HTML5 JS Implementation Browser fullscreen

Fullscreen

var Docelm = document.documentelement;

W3c

if (Docelm.requestfullscreen) {

Docelm.requestfullscreen ();

}

FireFox

else if (Docelm.mozrequestfullscreen) {

Docelm.mozrequestfullscreen ();

}

Chrome and more

else if (Docelm.webkitrequestfullscreen) {

Docelm.webkitrequestfullscreen ();

}

IE11

else if (Elem.msrequestfullscreen) {

Elem.msrequestfullscreen ();

}

Exit Full Screen

if (Document.exitfullscreen) {

Document.exitfullscreen ();

}

else if (Document.mozcancelfullscreen) {

Document.mozcancelfullscreen ();

}

else if (Document.webkitcancelfullscreen) {

Document.webkitcancelfullscreen ();

}

else if (Document.m**itfullscreen) {

Document.m**itfullscreen ();

}

Event Monitoring

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

fullscreenstate.innerhtml = (document.fullscreen)? "": "Not";}, False);

Document.addeventlistener ("Mozfullscreenchange", function () {

fullscreenstate.innerhtml = (document.mozfullscreen)? "": "Not";}, False);

Document.addeventlistener ("Webkitfullscreenchange", function () {

fullscreenstate.innerhtml = (document.webkitisfullscreen)? "": "Not";}, False);

Document.addeventlistener ("Msfullscreenchange", function () {

fullscreenstate.innerhtml = (document.msfullscreenelement)? "": "Not";}, False);

Full screen style settings in the browser full screen use We can also make style settings

Html:-moz-full-screen {

background:red;

}

Html:-webkit-full-screen {

background:red;

}

Html:fullscreen {

background:red;

}

HTML5 JS Implementation Browser fullscreen