Post
Ask Question

Fullscreen API in HTML5

Introduction

 
When I was developing a site for college, there was a requirement to display video with an option to show the video in full-screen mode. Since it was a Silverlight application, we were using the Application.Current.Host.Content.IsFullScreen = true; to be set to true. And in the fullscreenchanged event, we need to handle the resizing of the elements accordingly. 
 
But when we got HTML5, we now have an option in the JavaScript API called Fullscreen API. Yes, using Fullscreen API, we can render an element in fullscreen.
 
The Fullscreen JavaScript API provides an easy way for a web element to be rendered using the user's entire screen. Let us explain this with an example.
 

Properties and Methods

 
There are the following two properties available in the Fullscreen API.
  1. fullscreenElemen
  2. fullscreenEnabled
The API also has the following two methods:
  1. requestFullscreen
  2. exitFullscreen

Getting into Fullscreen Mode

 
The requestFullscreen() function prompts the user to allow the element to be rendered in fullscreen. If the user clicks on Allow, then the specific element will be rendered in fullscreen mode.
  1. <video controls id="college-video">  
  2.         <source src="somevideo.mp4"></source>  
  3. </video>  
  4. // Find the right method, call on correct element  
  5. function getIntoFullScreen(element) {  
  6.     if(element.requestFullscreen) {  
  7.         element.requestFullscreen();  
  8.     } else if(element.mozRequestFullScreen) {  
  9.         element.mozRequestFullScreen();  
  10.     } else if(element.webkitRequestFullscreen) {  
  11.         element.webkitRequestFullscreen();  
  12.     } else if(element.msRequestFullscreen) {  
  13.         element.msRequestFullscreen();  
  14.     }  
  15. }  
  16. // Launch fullscreen for browsers that support it!  
  17. getIntoFullScreen(document.getElementById("college-video")); // any individual element 
When the user disallows the permission, the element will remain the same in the screen.
 

Getting out of Fullscreen Mode

 
The function exitFullscreen() is only available in the document object. Using it the element will be restored to its own state. 
  1. // fullscreen  
  2. function exitFullscreen() {  
  3.     if (document.exitFullscreen) {  
  4.         document.exitFullscreen();  
  5.     } else if (document.mozCancelFullScreen) {  
  6.         document.mozCancelFullScreen();  
  7.     } else if (document.webkitExitFullscreen) {  
  8.         document.webkitExitFullscreen();  
  9.     }  
  10. }  
  11. // Cancel fullscreen for browsers that support it!  
  12. exitFullscreen(); 

CSS on Fullscreen

 
We need to add the following CSS rules to render the elements in full-screen mode.  
  1. :-webkit-full-screen {  
  2.     /* properties */  
  3. }  
  4.   
  5. :-moz-full-screen {  
  6.     /* properties */  
  7. }  
  8.   
  9. :-ms-fullscreen {  
  10.     /* properties */  
  11. }  
  12.   
  13. :full-screen {  
  14.     /*pre-spec */  
  15.     /* properties */  
  16. }  
  17.   
  18. :fullscreen {  
  19.     /* spec */  
  20.     /* properties */  
  21. }  
  22. /* deeper elements */  
  23.   
  24. :-webkit-full-screen video {  
  25.     width: 100%;  
  26.     height: 100%;  
  27. }  
  28. /* styling the backdrop*/  
  29.   
  30. ::backdrop {  
  31.     /* properties */  
  32. }  
  33.   
  34. ::-ms-backdrop {  
  35.     /* properties */  
  36. } 
This is how to use the JavaScript Fullscreen API.
 
Happy Coding.


Similar Articles