HTML5 FullScreen API with Example ~ Web CodeHelpers

HTML5 FullScreen API with Example

HTML5 API :  FullScreenAPI


FullScreen API is one of the best useful API in HTML5 Javascript API's  

In Full Screen API's we have two modes
  1. Request Full Screen 
  2. Cancel Full Screen


Request FullScreen Mode Based on the browser

// function to Activate Full Screen Mode using HTML5 API
function activateFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}



// Call the request method on the element you'd like to receive fullscreen and the window morphs to fullscreen, requesting that the user allow fullscreen mode

To Apply to whole page use the below mode of calling 

activateFullScreen(document.documentElement); // the whole page

For Applying to the particular image area or video or particular div use below mode of calling 
activateFullScreen(document.getElementById("videoElement")); // any individual element


Cancel FullScreen Mode

//Exit Full Screen Function
function exitFullscreen() {
  if(document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

//Exit Full Screen function will be called by esc key (Default Mode)  
exitFullScreen();

For cancellation no need to pass any element.

1 comments :

Subscribe updates via Email