The Html5 Full-Screen Api

by admin admin Date: 20-06-2013 html5 web tutorials html tools web design web development


How to Launch the Fullscreen Mode

The fullscreen API's requestFullScreen method is still prefixed in some browsers, so we'll need to do a bit ofsearching to find it:

// Find the right method, call on correct 
elementfunction launchFullScreen(element) { 
   if(element.requestFullScreen) {  
    element.requestFullScreen();    
} else 

if(element.mozRequestFullScreen) {  
    element.mozRequestFullScreen();    
} else if(element.webkitRequestFullScreen) {  
    element.webkitRequestFullScreen();    
}  }  

 // Launch fullscreen

How to Remove Fullscreen Mode

The remove FullScreen method you have to morphs the browser chrome back into standard layout:

// Whack fullscreen function cancelFullscreen() {  
  if(document.cancelFullScreen) {  
    document.cancelFullScreen();    
} else if(document.mozCancelFullScreen) {      
document.mozCancelFullScreen();    
} else if(document.webkitCancelFullScreen) {    
  document.webkitCancelFullScreen();    
}  
}  
  // remove fullscreen

Note that cancelFullScreen function is called on the document object only, so you not need to pass the individual element itself.

Hot to set fullscreen properties & events

Events and properties are prefixed, but will be unprefixed over time.

  • document.fullScreenElement: the element which has been pushed to fullscreen.
  • document.fullScreenEnabled:  notes if fullscreen is current enabled.

The fullscreenchange event lets us know when we go to/from fullscreen mode:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled

You can detect which browser-prefixed event to use along with the initial fullscreen method detection.

Fullscreen CSS

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

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

 

 

 
by admin admin Date: 20-06-2013 html5 web tutorials html tools web design web development hits : 2521  
 
 
 
 

Related Posts