While many people have used a go-to-fullscreen button as part of watching a video online, most probably don’t know that any page element can enable this functionality. At least, that is the idea behind the Fullscreen API. Any visual content element, be it a video, canvas, or really most anything else, can request to be put into fullscreen mode through a single JavaScript call.
However, the Fullscreen API itself is a little bit of a mess at the moment. While it has decent cross-browser support (~39%) , each major browser family has a different implementation of the specification. Currently, Webkit browsers center the element that requested the fullscreen mode. In Gecko (moz) browsers, the CSS rules of “width: 100%; height: 100%” are applied, stretching the content to fill all available space.
Luckily, each browser family also has their own pseudo CSS classes for styling a fullscreen element (ms and moz). Any project wanting true cross-browser support, then, will need to include some extra CSS rules and choose which, centered or stretched, they prefer and enforce it across the other browsers.
Like much of the current HTML5 functionality, though, each vendor has their own prefixes for the fullscreen properties and naming schemes for their functions. Despite this, most still enable the same basic functionality with their different names. The exception to this is Chrome, which is the only current browser that allows keyboard controls during fullscreen mode if the request for the mode is made using a special flag. Otherwise, and this is the same across the other browsers too, fullscreen mode is only for viewing content, not interacting with it.
| /** | |
| * A Fullscreen object | |
| * | |
| * Current support (http://caniuse.com/#feat=fullscreen) | |
| * is limited to Firefox 22+ (moz), Chrome 28+, Safari 6.0+, Opera 16.0+ (webkit), | |
| * and IE11+ (ms) | |
| * | |
| * @property {boolean} supported If fullscreen support exists in the current context | |
| * @property {boolean} isFullscreen If an element is currently fullscreen or not | |
| */ | |
| var Fullscreen = (function(self) { | |
| self.supported = ('exitFullscreen' in document) || | |
| ('mozCancelFullScreen' in document) || | |
| ('webkitCancelFullScreen' in document) || | |
| ('msExitFullScreen' in document); | |
| self.isFullscreen = false; | |
| /* | |
| * Standard | |
| */ | |
| document.addEventListener("fullscreenchange", function() { | |
| if (document.fullscreenElement) { | |
| self.isFullscreen = true; | |
| } else { | |
| self.isFullscreen = false; | |
| } | |
| }, false); | |
| /* | |
| * Firefox | |
| */ | |
| document.addEventListener("mozfullscreenchange", function() { | |
| if (document.mozFullScreen) { | |
| self.isFullscreen = true; | |
| } else { | |
| self.isFullscreen = false; | |
| } | |
| }, false); | |
| /* | |
| * Webkit (Chrome, Safari, Opera) | |
| */ | |
| document.addEventListener("webkitfullscreenchange", function() { | |
| if (document.webkitIsFullScreen) { | |
| self.isFullscreen = true; | |
| } else { | |
| self.isFullscreen = false; | |
| } | |
| }, false); | |
| /* | |
| * Internet Explorer | |
| */ | |
| document.addEventListener("MSFullscreenChange", function() { | |
| if (document.msFullscreenElement) { | |
| self.isFullscreen = true; | |
| } else { | |
| self.isFullscreen = false; | |
| } | |
| }, false); | |
| /** | |
| * If able, calls a request to make an element fullscreen | |
| * @public | |
| * @param {Element} element An Element to make fullscreen | |
| * @param {boolean} [allowKeyboard] (In Chrome only) If keyboard input is allowed during fullscreen | |
| */ | |
| self.goFullscreen = function(element, allowKeyboard) { | |
| try { | |
| if (element.requestFullscreen) { | |
| element.requestFullscreen(); | |
| } | |
| else if (element.mozRequestFullScreen) { | |
| element.mozRequestFullScreen(); | |
| } | |
| else if (element.webkitRequestFullScreen) { | |
| if (allowKeyboard) { | |
| element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); | |
| } else { | |
| element.webkitRequestFullScreen(); | |
| } | |
| } | |
| else if (element.msRequestFullScreen) { | |
| element.msRequestFullScreen(); | |
| } | |
| } catch (event) { | |
| console.log("Element " + element + " cannot use fullscreen mode."); | |
| } | |
| }; | |
| /** | |
| * Calls vender-specific fullscreen exiting functions | |
| * @public | |
| */ | |
| self.exitFullscreen = function() { | |
| if (document.exitFullscreen) { | |
| document.exitFullscreen(); | |
| } | |
| else if (document.mozCancelFullScreen) { | |
| document.mozCancelFullScreen(); | |
| } | |
| else if (document.webkitCancelFullScreen) { | |
| document.webkitCancelFullScreen(); | |
| } | |
| else if (document.msExitFullScreen) { | |
| document.msExitFullScreen(); | |
| } | |
| }; | |
| return self; | |
| })(Fullscreen || {}); |
Digital Ephemera 