Home / Programming / A brief introduction to video in HTML5

A brief introduction to video in HTML5

With the release of the iPad there has been a renewed interest in HTML5, since it enables a web site to display video without using Flash. On the one hand displaying video in HTML 5 couldn’t be simpler. It is one tag, that links to one file, like so:

<video src=”waterfall.mp4″ controls></video>

Too easy! But as always, the devil is in the details. The issue with video over the internet has always been the lack of a common standard for video formats. HTML5 does not solve this problem. As of today, HTML5 does not specify the one format that a browser must support. When doing video in HTML5, you essentially have two choices: Ogg Theora or H.264. Ogg Theora is open and free of patents (as far as we know), but is less widely supported and H.264 offers better performance. H.264 is covered by patents, but they are not charging royalties for free internet video until 2015. Today, H.264 is supported by Safari (including the iPhone/iPad), whereas Firefox supports Ogg Theora. Google Chrome supports both. Internet Explorer 8 still does not support the <video> tag. For an updated browser support comparison, see wikipedia.

With this in mind it is easy to alter our <video> tag to link to alternate formats, so our web page will work both Safari, Chrome and Firefox:

<video poster=”poster.jpg” controls>

<source src=”waterfall.mp4″ type=”video/mp4″>

<source src=”waterfall.ogg” type=”video/ogg”>

Your browser isn’t HTML5 compliant, download the video <a href=”waterfall.mp4″>here</a>

</video>

The browser will automatically select the video to display based on what format it supports. In the example above, Safari and Chrome viewers will see the “waterfall.mp4” video, and Firefox viewers will see the “waterfall.ogg” video. Internet explorer viewers will see the “Your browser isn’t HTML5 compliant” message. You could easily embed a flash video here as well instead of a download link.

All that remains is converting your source video both an H.264 mpeg and an ogg video. QuickTime Pro is relatively inexpensive and can easily convert to h.264 and many other formats. The free VLC player supports converting to ogg.  For Windows machines, SUPER can convert to FLV. There are several other free or open source implementations to convert videos from one codec to another – as always google is your friend.