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 licenseVorbis, 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 outDEMOand comment below!

News Reporter

Leave a Reply

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