Magic with HTML5 <video> tag controls

I'm a kinds very BIG rich-media lover!!! Thinking everytime how to handle multimedia in Drupal site very very easy way. So this time planing for a better video module for Drupal with 7.x-2.x release as Media module looks promising for future I gonna make my module compatible with it too.

So.. I got a chance to play with HTML5 video tag recently using some JS hacks, so had a lot of fun with that (Sometimes clients are requesting me to do this kind of work for their site, Thanks Jeff).

About HTML5 videos, you may already know that we need number of files to play a single video on Web (Weired!!), but I hope in future it will be a single file to save our video processing time (sometimes money of video encoding providers), and really interest thing is if you didn't specify the video type attribute, then browser will download all crappy 2 or 3 files to check which one is compatible (3x of your CDN charges :P). So make sure you specify type='video/ogg; codecs="theora, vorbis"' or similar every time you use HTML5 videos.

You may know that HTML5 video tag has sounds cool features.

• Keyboard accessibility.
• Simple API for controls.
• Simple API for controls.

I'm going to show you some sample code here (assume you have JS knowledge :) ). Controling <video> tag using JS is real simple. See the sample codes below and have fun with them.

// get the `<video>` tag elements
var videos = document.getElementsByTagName('video');
// now we can control
videos.play()
videos.pause()
videos.volume = '';
videos.currentTime = '';
// Events fired by the `<video>`
var player = document.getElementsById('#video_id');
player.addEventListner('lodeddata', function(){...}, true);
player.addEventListner('play', function(){...}, true);
player.addEventListner('pause', function(){...}, true);
player.addEventListner('timeupdate', function(){...}, true);
player.addEventListner('ended', function(){...}, true);