What is Fullscreen API
Javascript Fullscreen API allows user to present his web content in fullscreen and exit fullscreen when desired.
Fullscreen API has below properties, methods and events.
Properties
- Document.fullscreen
- Document.fullscreenElement
- Document.onfullscreenchange
- Document.onfullscreenerror
Methods
- Document.exitFullscreen()
- Element.requestFullscreen()
Events
- fullscreenchange
- fullscreenerror
How to use it
HTML:
/* HTML code to use javascript full screen API */
<div>
<button onclick="launchFullscreen(document.documentElement);" class="full-screen">Launch Fullscreen</button>
<button onclick="exitFullscreen();" class="exit-full-screen">Hide Fullscreen</button>
<button onclick="getAllProperties();" class="get-data">Dump Fullscreen Property Data</button>
</div>
JAVASCRIPT:
Launch Full Screen:
/**
* function which will make web page to full screen
* @param {object} element - desired element to show it in 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();
}
}
Exit Full Screen:
/**
* function to exit from full screen
**/
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
}
else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
Properties for Full Screen API:
/**
* function to get properties of fullscreen API
**/
function getAllProperties() {
console.log("document.fullscreenElement is: ", document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
console.log("document.fullscreenEnabled is: ", document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
}
Full Screen Events
/**
* Events of fullscreen API
**/
document.addEventListener("fullscreenchange", function(e) {
console.log("fullscreenchange event! ", e);
});
document.addEventListener("mozfullscreenchange", function(e) {
console.log("mozfullscreenchange event! ", e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
console.log("webkitfullscreenchange event! ", e);
});
document.addEventListener("msfullscreenchange", function(e) {
console.log("msfullscreenchange event! ", e);
});
References:
https://davidwalsh.name/demo/fullscreen.php
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Live Example:
