How to use HTML5 video on your website

HTML5 video was always going to be difficult with different browsers supporting different codecs. Looking at the HTML5 wikipedia page, we can see that we are going to need to encode our video in at least 3 different formats to cover all the browsers.

These are namely; h.264 (mp4), webm (VP8), and OGG Theora.

So now we know which codecs we should use, we now have the problem of encoding our video in these formats, how do we do this? A good free encoder i have found is one by a german guy called XMedia Recode.

Once you have encoded and uploaded your videos to the web server, then comes the HTML5 video code.

<video poster="video1.jpg" controls>

   <source src="coffee2.webm" type='video/webm; codecs="vp8.0, vorbis"'/>

   <source src="coffee2.ogv" type='video/ogg; codecs="theora, vorbis"'/>

   <source src="coffee2.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>

</video>

Obviously you need to make sure that your URLs are correct, then thats it!