Best way to implement HTML5 video

Question

I understand that HTML5 video is way more complicated than its proponents would like us to believe. Safari uses the proprietary H.264 codec, whereas Firefox, Chrome and Opera all support the open-source Theora. Internet Explorer doesn't support either, so needs a fallback, such as .mov or Flash.

I found a superb guide somewhere that put together a step-by-step guide for HTML5 on all these browsers, but I can't find it anywhere. Very annoying :(

What's the best way to implement HTML5 video so that all these browsers are covered? (Unfortunately, Flash is not an option.)

---

Edit: Ok, from what I've read, here is my own answer: This is the best way to implement HTML 5 video...

    <video id="video" width="450" height="170" preload="auto" autoplay="autoplay">
        <source src="../static/video/video.mp4" />
        <source src="../static/video/video.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="../static/video/video.ogv" type='video/ogg; codecs="theora, vorbis"' />
        <!-- Fallback (either Flash, an image, or a "Video not supported" message, etc.) -->
    </video>

It's the only way that's worked as expected on every browser so far. Unfortunately autoplay doesn't seem to be working in Chrome? :(

Update: Chrome doesn't support Autoplay.

Answer 1

I suspect this guide from Kroc Camen is the one you want http://camendesign.com/code/video_for_everybody.

It's not quite as hard as he outlines there if you are happy to use Flash to support older IEs.

Two versions of each video, one Theora and one H.264 will cover everything possible. One H.264 is enough if you don't mind browsers using Flash instead of Theora.

Worth reading up on WebM as well, it's set to replace theora.