The Fullscreen Mode

Developing an HTML video component means dealing with a cross-platform behavior quite difficult to achieve since the HTML API is incongruous on each browser and its versions.

Why creating your own HTML video component?

If you are a web developer, you have probably asked yourself this before so, I will explain in a brief and accurate way, what the most important reasons are to avoid any utility doubt:

• Code once, reuse everywhere.
• Keep a unique format and style across platforms.
• Extend functionality.
• Fewer maintenance issues. You control the whole creation process and future updates.

What's the matter with the Fullscreen API?

First of all, the API instability over the years. Currently there's no fullscreen standard API, therefore there are a bunch of inconsistencies we have to deal with, and mostly, if you're thinking of implementing your own custom video controls with a fullscreen button that does the magic, and has the same behavior on each platform, you'll have to deal with many unexpected issues.

So far, any current solutions are based on vendor specifications and the worst part is they do not ensure a stable behaviour.

To fuel the fire, some browsers are not as indulgent as we expect when integrating a custom video element design, since their native video layout elements inevitable overlay our custom ones. As a consequence, there is no css “z-index”, “absolute” positioning or vendor prefixes that can fix this.

So... now what?

This article proposes a cross-browser and cross-platform temporal solution as a result of a series of ideas, tests and workarounds of several authors and sources, some of them from a while back. Here there are links to a few of these:

https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player

https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

https://www.sitepoint.com/html5-full-screen-api/

These are some methods to deal with the API fullscreen main actions without dying in the process:

Listening to the fullscreen mode

var activated;
// Standard
document.addEventListener("fullscreenchange", function(){
 activated = document["fullscreen"];
});
// Firefox
document.addEventListener("mozfullscreenchange", function(){
 activated = document["mozFullScreen"];
});
// Chrome / Safari
document.addEventListener("webkitfullscreenchange", function(){
 activated = document["webkitIsFullScreen"];
});
// Microsoft Edge
document.addEventListener("msfullscreenchange", function(){
 activated = document["msFullscreenElement"];
});
// IE 11
if ("onmsfullscreenchange" in document) {
   document.onmsfullscreenchange = function(){
      activated = document["msFullscreenElement"];
   };
};

Activating the fullscreen mode

var myVideoElm = document.querySelector(".myVideo");
// iOS devices
if (/iPad||iPhone|Mac/.test(navigator.platform)) {
    myVideoElm.querySelector("video").webkitEnterFullscreen();
} else {
  // Standard
  if (el.requestFullscreen) {
      myVideoElm.requestFullscreen();
  // Firefox
  } else if (myvideoElm.mozRequestFullScreen) {
      myVideoElm.mozRequestFullScreen();
  // Chrome / Safari
  } else if (myVideoElm.webkitRequestFullscreen) {
      myVideoElm.webkitRequestFullscreen();
  // Internet Explorer and Microsoft Edge
  } else if (myVideoElm.msRequestFullscreen) {
      myVideoElm.msRequestFullscreen();
  }
}

*On iOS devices, fullscreen mode is activated on every browser and their OS’s versions but compromises any custom controls elements visibility.

Deactivating the fullscreen mode

// Standard
if (document.exitFullscreen) {
	document.exitFullscreen();
// Firefox
} else if (document.mozCancelFullScreen) {
	document.mozCancelFullScreen();
// Chrome / Safari
} else if (document.webkitCancelFullScreen){
	document.webkitCancelFullScreen();
// Internet Explorer and Microsoft Edge
} else if (document.mxExitFullscreen) {
	document.mxExitFullscreen();
}

Conclusion - The community effort

Until a new standard is reached, joining forces is the best way to tackle these issues successfully. This article is nothing but an attempt to provide solutions, help the community and encourage developers to give feedback on this subject.

More thoughts and ideas will come soon as (Part 2) of this article...