Best way to implement HTML5 video

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. Update update: Autoplay works with the "muted" attribute.

---

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.

---

<video id="movie" width="320" height="320" preload controls>
  <source src="pr6.mp4" type='video/mp4; codecs=avc1.42E01E, mp4a.40.2"' />
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
    <param ... />
  </object>
</video>

This example is taken from the book HTML5 Up and Running. You list each supported video encoding separately within a single <video> tag. The browser will try each one, starting with the first. This example shows three encodings. You will need do the actual video encoding yourself. To support multiple browsers, you'll need multiple encodings.

The final entry is a fallback for browsers that don't support the new HTML5 video tag. In the example, I used flash, but you can use whatever old-school format you prefer.

---

This may be to late but here you are. these are some CSS controls Enjoy.

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-time-remaining-display {display: none;}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

<video width="400" height="260" controls disablePictureInPicture controlsList="nofullscreen nodownload noplaybackrate">
    <source src="http://cdn.papercut.com/video/home/home2.mp4"type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.webm"type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"type="video/ogg" />
</video>

---

So if Flash is not an option, you've not said why but I suppose that doesn't matter, what is aceptable for IE? Are you happy to supply no video at all for IE, or what is it you want?

The examples given above are all good and valid. Where the Flash option has been entered, you can replace that with whatever you want, an image, some text informing the user that their browser isn't supported and provide them with a link to the video to download instead. Whatever you want really as basically the browser will ignore anything it doesn't understand until it gets to something that it does.

---

Is this the guide you're talking about?