5

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.

Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
  • http://camendesign.com/code/video_for_everybody might be of interest – jessegavin Jun 01 '11 at 19:33
  • Why isn't flash an option? I hate flash as much as the next guy, but for people on the newest build of IE on XP there is no option without using other plugins like quicktime, which they might not have. – Rich Bradshaw Jun 02 '11 at 08:42
  • I'm just using what I've been supplied with... No Flash files, plus a client with an aversion to Flash. – Chuck Le Butt Jun 03 '11 at 12:19

5 Answers5

4

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.

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • That guide looks somewhat useful, but it wasn't the one I found. Also, as I say in my question, Flash is not an option, sadly. – Chuck Le Butt Jun 01 '11 at 22:47
4
<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.

Michael Venable
  • 5,011
  • 3
  • 23
  • 20
  • Great answer, thanks. But as I say, Flash is not an option, but I suppose I could put an image there? – Chuck Le Butt Jun 01 '11 at 22:46
  • 1
    @django Using an image should work. Browsers that don't recognize the new video tag should simply ignore it and interpret whatever tag(s) it finds within it. I haven't tested it though. – Michael Venable Jun 02 '11 at 13:09
1

Is this the guide you're talking about?

Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
keyboardP
  • 68,824
  • 13
  • 156
  • 205
1

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.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73
1

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>
Ayoub ELKEBBAR
  • 26
  • 2