HTML5 Fullscreen video crossbrowser
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.
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!
Recent blog posts
- watir-webdriver web inspector
- gem list to gemfile
- Packing ruby2.0 on debian.
- Made it into The Guinness Book!
- to_h in ruby 2.0
- Filter elements by pattern jQuery.
- Better HTML password fields for mobile ?
- Grayscale image when user offline
- nth-child CSS pseudo-class Christmas colors
- EventEmitter in nodejs