globe
Warp Seven Creative Technologies for the World Wide Web

HTML5 Video for the Web

One of the more interesting and useful new features included in the next major revision of HTML is support for native browser video playback.

HTML5 allows you to embed video directly into a Web page with just a few lines of code. Third party plug-ins and Flash-based video players are no longer a prerequisite — your Web browser can now display video on it's own...

... Assuming, of course, your browser supports the HTML5 video tag and the appropriate codec is available.

Browser Support for Video Formats

It should come as no surprise that there are a number of fairly significant inconsistencies in terms of what browser supports which video codec etc... Firefox supports OGG/Theora and WebM, but not MP4/H.264; IE9 supports MP4/H.264 and WebM (maybe); Safari supports MP4/H.264 and so on...

As a result, if your goal is to reach the widest audience possible, your best bet is to encode the video using at least three different codecs (MP4/H.264, OGG/Theora and WebM) to ensure cross-browser compatibilty. Time-consuming? Yes, but you want EVERYONE to be able to see your movie - right?

Video Encoding & Conversion Software

There are a number of very good options out there in terms of video encoding & conversion software. We recommend Miro and Handbrake — both are free downloads and work pretty much as advertised.

With Miro, you can convert video into to a variety of different formats, including .ogg and .webM. Handbrake does a good job with .mp4 video — that's basically all you'll need.

Flash and Backward Compatibility

We mentioned earlier that Flash was no longer a prerequisite — well, a this point it's probably wise to hold off on discarding it outright. We want to ensure that folks using older (non-HTML5) browsers aren't left out, so a Flash video player can and should be used as a fallback (in this case, LongTail Video's JW Player).

Newer versions of Flash can play MP4/H.264, so use that as your source. Include the standard Flash embed code before the closing </video> tag.

And Finally, The Code:

<video width="280" height="228" controls>

   <source src="video/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

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

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

   <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="304" height="228">

      <param name="movie" value="jwplayer.swf" />

      <param name="allowfullscreen" value="true" />

      <param name="allowscriptaccess" value="always" />

      <param name="flashvars" value="file=video/movie.mp4" />

      <embed type="application/x-shockwave-flash" id="player2" name="player2" src="jwplayer.swf" width="304" height="228" allowscriptaccess="always" allowfullscreen="true" flashvars="file=video/movie.mp4" />

   </object>

</video>

When the page loads, the browser will go through the list of video source files until it finds one it can play. If a supported video codec is found, that's the one it'll go with. If a supported video codec is not found (or if the browser doesn't support HTML5 video), it will attempt to load the Flash player as a last resort.

This has been a very brief overview of how to implement HTML5 video on your Web page. For more detailed information on HTML5 video and the HTML5 standard in general, visit diveintohtml5.info.

» Go Back to the Main Projects Page

 
copyright © 2006 - 2013 -- warp seven design
home | about | services | projects | blog | contact