8
HTML5 Fullscreen video crossbrowser
HTML 5
Video

With the evolution of HTML5 APIs taking a video to Fullscreen and back is very easy and indeed no flash!

P.S : I shall be using webm for the demo, the below image and explanations must make things clear on why webm. enter image description here


Why webm? :

It gives :

  • VP8, a high-quality video codec we are releasing today under a BSD-style, royalty-free license
  • Vorbis, an already open source and broadly implemented audio codec.
  • Container format based on a subset of the Matroska media container.

Benefits ? :

It supports very high quality video viewing.

  • Enables great video playback performance, even on older computers.
  • It is completely free and open to everyone platform.
  • Supported on popular video sites like YouTube and so on.

THE CODE : [ webkit, v8 and spidermonkey ]

var videoElement = document.getElementById("myvideo");

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);

Feel free to check out DEMO and comment below!

Author

Notifications

?