HTML5 Video Element

When we use the words HTML5 and CSS3 the very first thing that strikes in is Video/Audio tags introduced in HTML5. Any UI developer keen to learn new trends would surely try to work on these tags and keep them for future references or if he is also working on mobile UIs he will dare implement it for mobile because mobile browsers use webkit browser engine.

Here we go...

I used these tags and checked it in browser on my local machine. It works perfectly! WOW!!

<video width="640" height="360" controls id="movie" poster="movies/html5-iphone.jpg">

<source src="movies/Nimbooda.mp4">
<source src="movies/Nimbooda-Fogg.ogv">

</video>

Since it was working on my local machine I thought of checking it online and uploaded the files on server. OMG! What the hell is happening? It's perfectly working on my local machine, why isn't it working online?? DEAD......

I went on googling. Thankfully Google helped me out with two things I was missing 'types' and 'codecs'. Alright! I've added these attributes. Still no luck. What the....

<video width="640" height="360" controls id="movie" poster="movies/html5-iphone.jpg">

<source src="movies/Nimbooda.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="movies/Nimbooda-Fogg.ogv" type='video/ogg; codecs="theora, vorbis"'>

</video>

<script type="text/javascript">
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
});
</script>

Again had to take help of Google, after reading on and on I read this sentence "You need to contact your webhost and get them to add .ogv - video/ogg as a valid MIME type (they should know what you mean) same for MP4."

The root of all evil was the MIME type on server. Make sure you get this done before struggling with page re-load and re-upload.

And finally Fallback for IE -

Note that you shouldn't include classid in the object tag in order to be compatible with browsers other than Internet Explorer.

<!-- IE Fallback -->
<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="350" id="newIdPlayer" height="300" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="flash-video.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="" />
<param name="base" value="" />


<param name="flashvars" value="filePath=videos/Nimbooda" />

<embed base="" src="flash-video.swf" flashvars="filePath=videos/Nimbooda" quality="high" width="350" height="300" name="newIdPlayer" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>