Lets go fullscreen with HTML5
Its been almost a year and a half I didn’t write any post. Well here I am again. The good news among font end lover is that now HTML5 natively supports fullscreen APIs. What!! yes it does. Recently I came across the news and though its better to share with others as well. Right now it is being supported by FF 10+, Chrome 13+ and Safari 5.1+. IE 10 and Opera 12 are expected to support it soon. Find out more about support here.
How it works?
There are four things you need to know.
- Request fullscreen (on document.documentElement)
- Cancel fullscreen (on document)
- Fullscreen event (on document)
- Fullscreen state (on document)
The strange thing about all of above four is their syntax is different in all three supported browsers!!. Lets see one by one how they behave on different browsers.
FireFox:
- request property: document.docElement.mozRequestFullScreen // on document.documentElement
- request call: document.docElement.mozRequestFullScreen()
- cancel property: document.mozCancelFullScreen // on document
- cancel call: document.mozCancelFullScreen()
- fullscreen event: mozfullscreenchange // on document
- fullscreen status: mozFullScreen // on document
Chrome/Safari:
- request property: document.docElement.webkitRequestFullScreen // on document.documentElement
- request call: document.docElement.webkitRequestFullScreen()
- cancel property: document.webkitCancelFullScreen // on document
- cancel call: document.webkitCancelFullScreen()
- fullscreen event: webkitfullscreenchange // on document
- fullscreen status: webkitIsFullScreen // on document
General(W3 specification):
- request property: document.docElement.requestFullscreen // on document.documentElement
- request call: document.docElement.requestFullscreen()
- cancel property: document.exitFullscreen // on document
- cancel call: document.exitFullscreen()
- fullscreen event: fullscreenchange // on document
- fullscreen status: fullscreen // on document
I guess its better to have an example rather than blah blah. Below is demonstrated a simple example that has two buttons 1) Go Fullscreen and 2) Exit Fullscreen. As the name suggests, the first one makes an API call to request fullscreen and the latter one calls cancel fullscreen. It also has status string right next to the buttons, that tells you which mode are you in fullscreen or regular.
Example:
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<!DOCTYPE html>
<html>
<head>
<link type='text/css' rel='stylesheet' href='fullscreen.css'>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='fullscreen.js'></script>
</head>
<body>
<input type='button' value='Go Fullscreen' id='go-fullscreen'>
<input type='button' value='Exit Fullscreen' id='exit-fullscreen'>
Current Mode: <span class='screen-mode'>Regular</span>
</body>
</html>
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
// ON DOM ready
$(function(){
var goFullscreenButton = $('#go-fullscreen'),
exitFullscreenButton = $('#exit-fullscreen'),
d = document,
docEle = d.documentElement;
// WHEN the state of screen changes (using jQuery's on method with multiple event)
$(d).on({
'fullscreenchange': function(){
$('.screen-mode').html( d.fullscreen ? 'FullScreen' : 'Regular' );
},
'mozfullscreenchange': function(){
$('.screen-mode').html( d.mozFullScreen ? 'FullScreen' : 'Regular' );
},
'webkitfullscreenchange': function(){
$('.screen-mode').html( d.webkitIsFullScreen ? 'FullScreen' : 'Regular' );
}
});
// WHEN clicked on 'Go Fullscreen' (all request fullscreen event works on document.documentElement)
if(goFullscreenButton){
goFullscreenButton.on('click', function(){
if(docEle.requestFullscreen){
docEle.requestFullscreen();
}else if(docEle.mozRequestFullScreen){
docEle.mozRequestFullScreen();
}else if(docEle.webkitRequestFullScreen){
docEle.webkitRequestFullScreen();
} else {
// WHEN on mobile devices
alert('fullscreen not supported');
}
});
}
// WHEN clicked on 'Exit Fullscreen' (all cancel fullscreen event works on document)
if(exitFullscreenButton){
exitFullscreenButton.on('click',function(){
if(d.exitFullscreen) {
d.exitFullscreen();
} else if(d.mozCancelFullScreen) {
d.mozCancelFullScreen();
} else if(d.webkitCancelFullScreen) {
d.webkitCancelFullScreen();
}
});
}
});
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
html:fullscreen{
background: darkslategrey;
}
html:-moz-full-screen{
background: darkslategrey;
}
html:-webkit-full-screen{
background: darkslategrey;
};