Working with JavaScript FullScreen API

JavaScript is a powerful and popular language for programming on the web.JavaScript is eating the programming world from few years.It has many great features but One very simple but useful new JavaScript API is the Fullscreen API. The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit fullscreen when desired. Here’s how to use this incredibly simple API.

1.Detecting FullScreen support

This is very first step for using FullScreen API which will let you detect fullscreen support of browser.You’ll need to use the typeof command to find out if a given browser has support for the FullScreen API methods.There is also boolean property called fullScreenEnabled that tells you if the user has disabled the feature. So we can use following code to detect:-

// full-screen available?
if (
document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
) {
//do whatever you want
}

The property document.fullscreenEnabled will return true/false value based on browser’s support.

2.Launching Fullscreen Mode

The element.requestFullscreen() method issues an asynchronously requests that the element be made full-screen.
The fullscreen API’s requestFullscreen method is still prefixed in some browsers, so you’ll need to do a bit of searching to find it:


// Find right method, call on correct element
function fullScreenElement(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}

And then you can call this function like this:-

//using JavaScript
fullScreenElement(document.getElementById("elementId"));

//using jQuery
fullScreenElement($("#elementId")[0]);

3.Exiting Fullscreen Mode

The document.exitFullscreen method is used to cancels full-screen mode. It can be used like this:

function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

//Cancel fullscreen for browsers that support it!
exitFullscreen();

4.Fullscreen Event and Current Status

To detect when a FullScreen event happens, there is a fullscreeneventchange that fires on the element going FullScreen and a boolean property (fullScreen) on the document object that reports if it’s in FullScreen mode or not.

document.fullscreenchange event
This event is fired when moving to and from full-screen view. And here is how you can add event listener for cross browser comparability:

document.addEventListener("fullscreenchange", function() {
console.log("...........full-screen-changed---") ;
});
document.addEventListener("webkitfullscreenchange", function() {
console.log("...........full-screen-changed---") ;
});
document.addEventListener("mozfullscreenchange", function() {
console.log("...........full-screen-changed---") ;
});
document.addEventListener("MSFullscreenChange", function() {
console.log("...........full-screen-changed---") ;
});

document.fullscreenerror event
There are many reason for fail full screen in that case fullscreenerror event will be fire here is how you can listen that event:

document.addEventListener("fullscreenerror", function() {
console.log("Error") ;
});
document.addEventListener("webkitfullscreenerror", function() {
console.log("Error") ;
});
document.addEventListener("mozfullscreenerror", function() {
console.log("Error") ;
});
document.addEventListener("MSFullscreenError", function() {
console.log("Error") ;
});

5.Fullscreen CSS

Browsers do provide us one helpful bit of fullscreen CSS control:

:-webkit-full-screen {
/* properties */
}

:-moz-full-screen {
/* properties */
}

:-ms-fullscreen {
/* properties */
}

:full-screen { /*pre-spec */
/* properties */
}

:fullscreen { /* spec */
/* properties */
}

/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}

/* styling the backdrop*/
::backdrop {
/* properties */
}
::-ms-backdrop {
/* properties */
}

6.Embedding FullScreen

When you embed content from another site (like a YouTube video) using Flash’s

<object width="300" height="150"><embed />

tags, you can specificy whether or not to allow FullScreen to work. This feature has also been added to the iframe tag using the `allowFullScreen` attribute.

<iframe src="http://yourothersite.com/" width="680" height="400" allowFullScreen></iframe>

Add a Comment

Your email address will not be published. Required fields are marked *