HTML 5 video tag coding by Toby Stack & Dean Case February 2011

Web video

Video upload sites

This article is designed for people with knowledge of XHTML who want to start using HTML5 for its video capability. This article will not cover the full range of HTML5 and will assume you have a reasonable grasp of XHTML.

To begin with, we are going to show you how to overcome most of the problems of HTML5 video browser compatibility outlined here with a simple example.

Due to the lovely <source src> and <type> tags, we can embed multiple video codec/file types in one <source src> "list" within the <video> tag, and a web browser will automatically select the one it can play. For example, if you have three src values, your browser will go down the list until it can find a supported format.

<video controls="controls">
<source src="imt_intro.mp4" type="video/mp4">
<source src="imt_intro.ogv" type="video/ogg">
<source src="imt_intro.webm" type="video/webm">
You need to update your browser to the latest version to watch this video
</video>

The only downsides are, the 3 competing HMTL5 video file types must be encoded and end-users will need the latest browser versions (including IE9) AND there are still buggy issues on various browsers and platforms!

HTML5 video test

An example html 5 page with video is here. Use it to test with browsers and platforms and let us know your findings.

Now read on for more details, including how to add Flash video to your "list".

Preparing video

You will need to create MPeg4/h364, WebM and Ogg Theora (and possibly Flash) versions of your video files if you want to try the techniques here. Help with optimising is here

New and updated HTML tags

Putting it together

This is a mock-up of a webpage made with HTML5.

<!DOCTYPE HTML>
<html>
<body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<video width="1280" height="720" controls="controls" poster=”imt.jpg”>
<source src="imt.mp4" type="video/mp4" /> <!— H.264 -->
<source src="imt.webm" type="video/webm" /> <!— WebM -->
<source src="imt.ogg" type="video/ogg" /> <!— Ogg Theroa -->
Your browser does not support HTML5 video <!— Warning if other files don't play-->
</video>
</body>
</html>

Add Flash fall-back

OK so that’s nice and all, but where does it leave all those people who don’t have HTML5? Well that where this nice trick comes into play, instead of popping up a little message saying sorry, why not pop up a Flash replacement like this.

<!DOCTYPE HTML>
<html>
<body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<video width="1280" height="720" controls="controls" poster=”imt.jpg”>
<source src="imt.mp4" type="video/mp4" /> <!— H.264 -->
<embed src="imt.swf" type="application/x-shockwave-flash"
width="1080" height="720" allowscriptaccess="always"
allowfullscreen="true">
</embed>
</video>
</body>
</html>

This works for IE and Safari because IE ignores the HTML5 and plays the flash and Safari ignores the flash and plays the HTML5. Unfortunately this is not enough as Firefox and Chrome do understand HTML5 but don’t fully support H.264. To get full support you will also have to include a video format supported by both Chrome and Firefox. At the moment Firefox is still developing its WebM support with only the very latest versions giving WebM playback. Given the limitations of the Ogg Theora format and the fact that WebM support for Firefox is imminent personally I would encode to WebM rather than Ogg Theora. The final code therefore would be.

<!DOCTYPE HTML>
<html>
<body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<video width="1280" height="720" controls="controls" poster=”imt.jpg”>
<source src="imt.mp4" type="video/mp4" /> <!— H.264 -->
<source src="imt.webm" type="video/webm" /> <!— WebM -->
<embed src="imt.swf" type="application/x-shockwave-flash"
width="1080" height="720" allowscriptaccess="always"
allowfullscreen="true">
</embed>
</video>
</body>
</html>

If you would prefer to have immediate support for Firefox over higher video quality the code would be

<!DOCTYPE HTML>
<html>
<body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<video width="1280" height="720" controls="controls" poster=”imt.jpg”>
<source src="imt.mp4" type="video/mp4" /> <!— H.264 -->
<source src="imt.ogv" type="video/ogg" /> <!— Ogg -->
<embed src="imt.swf" type="application/x-shockwave-flash"
width="1080" height="720" allowscriptaccess="always"
allowfullscreen="true">
</embed>
</video>
</body>
</html>

Now this code has a slightly confusing structure so I will use these diagrams to help illustrate what is happening.

a diagram higlighting the structure within the code

Here you can see the video tag in blue with the fall-back content highlighted in red. In a HTML compliant browser all the fall-back content should be ignored as thus.

a diagram using text colour to show which lines of code are active in HTML5 compliant browsers

Non HTML5 compliant browsers would effectively read the code like this.

a diagram using text colour to show which lines of code are active in browsers that are not HTML5 compliant

How many files do I need?

The problem with this solution is you need three (or even four if you want both WebM and Ogg) different files for each video on your site. This is a pain as video is both large in size and slow to create. However there is a way of reducing your file numbers, have a Flash player that points to your video file. Flash has currently got inbult H.264 support and is planning to support WebM in future releases. This means we can cut the number of videos needed to just two.

a diagram showing the route a user takes to see video in diffrent browsers

Free technical help for digital creators - music, video, art, photography, graphic & web design