HTML5 Full-Screen API

The API permits a particular element to be viewed at full-screen. Dissimilar to pressing F11 to force your program to full-screen, the API is intended for pictures, videos and games running within a container. When you enter full-screen mode, a message notifies the client that they can press ESC whenever they  wish to come back to the page. The Full-Screen API is currently supported by all modern desktop programs, including IE11. There’s little support for mobile browsers, however those browsers normally run on full-screen view. Unluckily, we have minute differences, prefixing requirements, and cross-browser discrepancies to deal with..

The JavaScript API

Assume we have an image with the ID “myimage” Which we want to view full-screen. The main methods and properties are:   document.fullscreenEnabled (changed) This property returns true when the document is in a state which allows full-screen mode. It can also be used to determine browser support:

if (document.fullscreenEnabled) { ... }

Prior implementations had a capitalized “S” in ‘Screen’, and it is still required for Firefox. Including prefixes results in significantly longer cross-program code:

// full-screen available?
if (
document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
) {
...
}

Opera 12 is the only browser not to require prefixes but Opera 15+ uses webkit.

element.requestFullscreen() (changed) This method makes a particular element full-screen, e.g.

document.getElementById("myimage").requestFullscreen();

 

Again, ‘screen’ has changed to lower case. The cross-browser code:

var i = document.getElementById("myimage");

// go full-screen
if (i.requestFullscreen) {
	i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
	i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
	i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
	i.msRequestFullscreen();
}

 

document.fullscreenElement (changed) This property returns the current element which is currently being displayed full-screen or null when not full-screen:

if (document.fullscreenElement) { ... }

 

The  ‘screen’ is now lowercase. The cross-browser code:

// are we full-screen?
if (
	document.fullscreenElement ||
	document.webkitFullscreenElement ||
	document.mozFullScreenElement ||
	document.msFullscreenElement
) {
...
}

 

document.exitFullscreen (changed) This method exits the  full-screen mode:

document.exitFullscreen;

 

Once Again, we get a lowercase ‘screen’. It was previously named cancelFullScreen, and still is within Firefox. The cross-browser code:

// exit full-screen
if (document.exitFullscreen) {
	document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
	document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
	document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
	document.msExitFullscreen();
}

 

document.fullscreenchange event This event is executed when moving to and from full-screen view. No data is given by the event however you can figure out if full-screen is enabled by checking whether  document.fullscreenElementis not null.

document.addEventListener("fullscreenchange", function() { ... });

The name has not changed, but we require cross-browser prefixes and camel-casing for IE:

document.addEventListener("fullscreenchange", FShandler);
document.addEventListener("webkitfullscreenchange", FShandler);
document.addEventListener("mozfullscreenchange", FShandler);
document.addEventListener("MSFullscreenChange", FShandler);

document.fullscreenerror event Full-screen can fail. For example, iframes without an allowfullscreen attribute or windowed plug-in content may be blocked. A fullscreenerror event may therefore be fired:

document.addEventListener("fullscreenerror", function() { ... });

The name has not changed, but we require cross-browser prefixes and camel-casing for IE:

document.addEventListener("fullscreenerror", FSerrorhandler);
document.addEventListener("webkitfullscreenerror", FSerrorhandler);
document.addEventListener("mozfullscreenerror", FSerrorhandler);
document.addEventListener("MSFullscreenError", FSerrorhandler);

 

Full-Screen CSS

We can influence full-screen using CSS styles as well.. :fullscreen pseudo class (changed) You can apply styles to an element or its children when viewed in full-screen mode:

:fullscreen {
	...
}

 

This was previously named :full-screen, and still is in Webkit and Firefox. For cross-browser code:

:-webkit-full-screen {
}

:-moz-full-screen {
}

:-ms-fullscreen {
}

:fullscreen {
}

 

::backdrop (new) You can apply a color or image backdrop when an element with a different aspect-ratio is viewed full-screen:

:fullscreen::backdrop {
	background-color: #006; /* dark blue */
}

 

The backdrop is a pseudo element behind the fullscreen element but on top of  all other page content. It is compatible with IE11, but not Firefox and Opera 12. Chrome, Safari, and Opera 15+ include the backdrop element but do not allow it to be styled. For now, you can only target IE11, e.g.

:-ms-fullscreen::-ms-backdrop {
	background-color: #006; /* dark blue */
}

 

Differences In Styling

In IE11, Firefox, and Opera 12 the full-screen element is set to 100% width and height. So, the images are stretched and the aspect ratio is not considered. Width and height can be adjusted  in IE11 positions a full-screen element to the top-left with a dark backdrop (configurable with ::backdrop). Opera 12 is alike IE11 but shows a transparent backdrop. Firefox ignores the dimensions. In Chrome, Safari, and Opera 15+ the element is centered with a black backdrop.

If you want some uniformity, it’s easy to make the Webkit/Blink browsers stretch like Firefox/IE11:

:-webkit-full-screen {
	position: fixed;
	width: 100%;
	top: 0;
	background: none;
}

 

Alternatively, you can make IE11 follow the Webkit/Blink centering:

:-ms-fullscreen {
  width: auto;
  height: auto;
  margin: auto;
}

This method is not compatible with Firefox, which ignores the width and height as mentioned above. To fix it, you have to make the parent element full-screen and apply appropriate sizing.

So, ready to use full-screen API ?

The HTML5 Full-Screen API is comparatively simple but browser differences results in nasty code, and there’s no guarantee that it won’t change again. The circumstances will improve so it may be favourable to put time and effort in other features until the API’s compatibility improves.

That said, full-screen can be usefull for HTML5 games and video-rich websites. If you don’t want to maintain code yourself, then library like  screenfull.js can also be used for smooth consistent functioning.

 

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *