DCSIMG
You are reading a MIX Online Opinion. In which we speak our minds. hanshu Meet Hans Arrow

Opinion

10Comment Retweet

HTML5 video tag with H.264 codec

Jan 25, 2010 By Hans Hugli

Our 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.

html5video

Follow the Conversation

10 Comments so far. You should leave one, too.

Adrian Godong Adrian Godong said on January 26, 2010

Where is the dlrmedia.js? Or is it the dlr.js and gestaltmedia.js?

Matthew Matthew said on January 26, 2010

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? :)

rezlam (gravatar) rezlam said on January 26, 2010

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

Joshua Allen Joshua Allen said on January 26, 2010

@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 :-)

rezlam rezlam said on January 27, 2010

@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 ;)

John Cox John Cox said on February 01, 2010

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?

Paul Betts Paul Betts said on February 01, 2010

How does this interact with the DOM? Do you emulate the HTML5 Video object to Javascript as well?

Joshua Allen Joshua Allen said on February 01, 2010

@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

Mike Mike said on February 27, 2010

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.

Mike Mike said on February 27, 2010

Add your social network profile — we’ll use it to find your avatar. Or, just add your email. That works too.