HTML5 Video Essentials

May 30th, 2010 by Alex Leave a reply »

Are you using HTML5 <video> to play movies on your website? Not yet? Well, it’s so easy, that it’s hard to believe it’s true.

First of all, you should know that browsers are not video players, thus they can’t have K-Lite codec pack built-in or they can’t play MJPEG from your old camera… So we should be very specific in choosing the right video format.

After big debates, the big guys like Google, Mozilla, Opera and others decided they should use the WebM codec. It is based upon the famous On2 codec which was used in FLV file formats if you remember. The other two big video formats: H.264/MPEG-4 AVC and Ogg Theora will move to second choice slowly because they are covered with different patents, and so, people using them will need to buy patents and lose money, but WebM is not just royalty-free, it’s open source. So we can expect WebM2 and WebM3 in future with much quicker decoding speed and picture quality.

VP8 is delivered in Matroska container with Vorbis audio, both of outstanding quality. Plus, it will be played back in Internet Explorer 9 if the codec will be installed.

So, we have these choices today: H.264/MPEG-4 AVC, WebM and Ogg. According to the table at Wikipedia by today, the most playable format now is Ogg. Only poor Safari and Internet Explorer can’t embed the codec yet.

Creating a video tag is very simple, just like this:

<video>
	<source src='dre.ogv' type='video/ogv; codecs="theora, vorbis"' />
	<source src='dre.mp4' type='video/mp4; codecs="avc1, mp4a"' />
</video>

Isn’t that simple? Now why did i place 2 source tags, that’s because some browsers can play Ogg, while others play only H264, so we can include both here to make sure our video will be played and information delivered.
Additionally we can put a poster attribute to the video tag for the preview image like this:

<video poster="http://example.com/video.jpg">
...

Next, let’s add an id for our video, switch on the controls, set the dimensions and put the dark background color.

<style>
#myvideo { background: black; width: 400px; height: 300px }
</style>
<video poster="http://example.com/video.jpg" id='myvideo' controls>
...

No need in putting controls=true or whatever, the browser should just watch if the attribute is set. Now, adding a bit of javascript can help us create custom controls for the video:

<script type='text/javascript'>
function ge(i) { return document.getElementById(i); }
</script>
 
<button onclick='ge("myvideo").play()'>Play</button>
<button onclick='ge("myvideo").pause()'>Stop</button>
<button onclick='ge("myvideo").currentTime -= 10'>Backward</button>
<button onclick='ge("myvideo").currentTime += 20'>Forward</button>
<button onclick='ge("myvideo").muted = !ge("myvideo").muted'>Mute/Unmute</button>

See how easy and intuitive it is, plus no need in developing different conditional statements for each browser, one command for all and that’s how it should be.

In the end you should get something like this:



Note: this OGG video is seen to be played back only in Mozilla Firefox, while Opera and Chrome see the video tag and display the player, but can’t play it.
Chromium plays the WebM format nicely, so we can expect it to be played in stable Google Chrome versions in a few days.

This page can be found by searching for:

html5 mjpegMJPEG HTML5jquery mjpeghtml5 video mjpeghtml5 video mutehtml5 mjpgmjpg html5mute html5 videohtml 5 mjpeg



1 comment

  1. the best video player that i use is none other than VLC Player, it is free and i think it is open source too’-`