HTML5 video tag with H.264 codec
Jan 25, 2010 By Hans HugliOur implementation of the HTML5 video tag has been tested on both Windows and Mac, using IE, Firefox, Safari, and Chrome.
To use it, just add a reference to dlrmedia.js at the top of your page. Visitors to your site will be able to view your H.264 video using the codec that ships with Silverlight.
Here is a sample, using the YouTube recording of Ian Hickson discussing HTML5 features. To try it out, copy/paste this code to a new HTML page, and host it on your local web server.
<!DOCTYPE html>
<html>
<head>
<script src="http://visitmix.com/dlr/dlr.js" type="text/javascript"></script>
<script src="http://visitmix.com/dlr/gestaltmedia.js" type="text/javascript"></script>
</head>
<body>
<video id="video1" width="640" height="480" volume=".7" controls autoplay>
<source src="http://www.visitmix.com/content/files/HTML5.mp4" type="video/wmv"></source>
</video>
</body>
</html>
We depend on the H.264 decoder that ships with Silverlight, which is widely deployed and easy to install. It would be equally simple to use Flash instead, and our implementation is not difficult to modify. You are free to use and modify our source code. More details at the Gestalt Widgets page.
Click the thumbnail below to see the video.



Follow the Conversation
10 Comments so far. You should leave one, too.
Where is the dlrmedia.js? Or is it the dlr.js and gestaltmedia.js?
Cool … that’s exciting to see HTML5 video playback in IE! Actually, I watched the video in FeedDemon, and it worked perfectly. Can’t wait to try this out on my own site.
Now, Live Movie Maker needs the option to output as H.264! Can you pressure the Live Essentials team to add this? :)
This is so wrong!
To depend on Silverlight or Flash is the opposite of what HTML5 video tag intends to do. I know this is a hack, but this is still a pity.
The good thing is to see Microsoft moving more and more towards H.264
@Adrian – yep, that looks like a typo.
@Matthew – it also works with WMV, but then your video wouldn’t work in Chrome or Safari, so you want an encoder. There are free 3rd party tools, or you can get it bundled with Expression Web for $150.
@rezlam – just think of it as a stop-gap to get momentum on HTML5 while waiting for everyone to upgrade their browsers. It’ll probably take 4+ years before browsers with built-in video tag support for H.264 have > 90% deployment, so nobody wants to stall while waiting for that. The only other option would be to use Flash directly without the HTML5 tag, and I know you don’t want to do that :-)
@Joshua – I see the point of the video tag, it’s a far more easy way of embedding video on a page and it is great.
The down side is that it relies on Silverlight (don’t get me wrong, it’s a great product). I’d recomend change the video tag so it can detect Silverlight or Flash and use the available engine, making it work on any platform.
Just a correction, Silverlight 3 also supports H.264 out of the box, as you know ;)
Now here’s a question… If Apple don’t want to play with Adobe and I still want to be able to let video play on safari on say an iPad, flash is unlikely to be there, and given we are talking iPad, no Silverlight either, can I assume H.264 plays straight out of the box?
How does this interact with the DOM? Do you emulate the HTML5 Video object to Javascript as well?
@John – Yes, in Safari 4, the HTML5 video tag will work out-of-the-box if you have Quicktime installed. Our video player will revert to the one in the browser if the built-in supports the H.264 codec.
@Paul – Yes, our HTML5 video JS APIs are implemented in Python, so they can be called from Javascript, Python, or Ruby. The Python/Ruby can interact relatively seamlessly with DOM. You can look at our source to see how it works, or see Hans’s post about interop between JS and Python: http://visitmix.com/LabNotes/DLR-and-JavaScript-Interoperability-with-Gestalt
As the mp4 video uses H264, Firefox will not work. However, I’ve created a Greasemonkey script that will allow it to play by (ironically) using Flash. It replaces the video tag with the Flash player on the fly.
The script serves to show how HTML5 needs to support open codecs not H264, so that we don’t continue to be locked into Flash. Hopefully, Google will open source the recently purchased On2 codecs.
http://userscripts.org/scripts/show/70028