Cross-Browser HTML5 Video With Flash or Silverlight Fall-back

Until recently, playing video files in a web page was notoriously complicated. The user requires a Flash or Silverlight plug-in and even the simplest HTML is a confusing mess:


<object width="320" height="240">
<param name="movie" value="myvideo.swf" />
<embed src="myvideo.swf" width="320" height="240"></embed>
</object>

Few HTML5 features excite developers more than native audio and video. The <audio> and <video> tags allow you to play media files in an HTML5-aware browser without a plug-in. The elements also become part of the DOM so you can create your own player controls, add captions and synchronize JavaScript events with media playback. As a bonus, the basic HTML5 code is far easier to understand:


<video src="myvideo.mp4" width="320" height="240" />

The web developer’s life is never that simple, of course. Although the HTML5 specification defines the <audio> and <video> tags, it does not specify a particular codec and vendors have their own choices. For IE and Safari, you can’t go wrong with H.264-encoded MP4 files. Firefox, Chrome and Opera support Theora or Vorbis in an Ogg container and WebM will be available soon.

Therefore, you’ll still need to encode multiple files for a single video. Fortunately, there’s no need to resort to scripting or browser detection because HTML5 permits us to define any number of source files — the browser will choose the first compatible format it finds, e.g.


<video width="320" height="240">
	<source src="myvideo.mp4" type="video/mp4" />
	<source src="myvideo.ogv" type="video/ogg" />
	<source src="myvideo.webm" type="video/webm" />
</video>

If the browser doesn’t support the <video> tag, we can fall back to a Flash or Silverlight version:


<video width="320" height="240">
	<source src="myvideo.mp4" type="video/mp4" />
	<source src="myvideo.ogv" type="video/ogg" />
	<source src="myvideo.webm" type="video/webm" />

	<object width="320" height="240">
	<param name="movie" value="myvideo.swf" />
	<embed src="myvideo.swf" width="320" height="240"></embed>
	</object>
</video>

Alternatively, we can display a helpful error message or show an image — perhaps an animated PNG or GIF!


<video width="320" height="240">
	<source src="myvideo.mp4" type="video/mp4" />
	<source src="myvideo.ogv" type="video/ogg" />
	<source src="myvideo.webm" type="video/webm" />

	<p>Sorry, your browser cannot play this video.</p>
	<img src="videofail.png" />

</video>

This facility was specifically designed in HTML5 so video can be shown on legacy browsers with a plug-in. HTML5 lives very happily with Flash or Silverlight — it won’t kill them off any time soon!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • LazyAndroid

    Can’t you make that paragraph or image display when even Flash (or Silverlight) fails?
    But then it should read:
    <p>Your Browser is so lame it doesn’t even display Flash, much less HTML5. Update now and experience the future. Oh, except if your blind, then I apologise.</p>

  • http://www.lunadesign.org awasson

    Good tips. This is very much in line with the video for everybody article that came out a little while ago.

  • USPatriot

    First off, Silverlight is mainly targeted toward LOB apps, the ones big businesses use, which means plenty of $$$$ to go toward Silverlight developers. So, although Silverlight can be used on the Web, it will also be used by medium-large corporate intranets. Again, that’s where the capital lays. So, HTML5 is mute in that aspect, when Silverlight would crush it in development and delivery.

    • http://www.lunadesign.org awasson

      This is kind of off-topic but it’s a pretty interesting subject because there has been a lot of buzz about Microsoft’s plans with Silverlight recently and there’s more to the story than just HTML5 vs. Silverlight. I think MS is reassessing their Silverlight strategy based on recent computing trends (mobile computing).

      I’ve been reading a fair bit about it but I’m not sure what’s going on with Silverlight’s current direction. A year ago, the accepted line of thinking was that Silverlight would completely merge with Windows Presentation Foundation (WPF) and developers would easily shift from single-function, lightweight Web apps towards enterprise apps but that seems to have changed and I’m pretty sure it has something to do with the success of tablet computing and smart phones… This year I’ve been reading more and more articles about Microsoft taking Silverlight out of the spotlight and even talk about it being the focus for smartphone app development. Even this year’s PDC keynote from Steve Balmer had only one mention of Silverlight which talked about silverlight templates in VS Express for Windows Phone.

      Based on what’s going on, my guess is that Silverlight won’t crush anything until the mobile device platform market settles down so that they can come up with a winning strategy.

  • http://www.jonathanpenny.co.uk jonpenny

    Nice tutorial Craig. Camen Design have had a similar code tutorial for a while now and it works a treat.

    http://camendesign.com/code/video_for_everybody

  • c_spha

    Nice short and simple. Very helpfull

  • nnes

    aha, this might come in handy!

  • http://www.freebiesireland.com ron

    yes but it wont work in most browsers .

    They develop the video tag but yet again none of the browser people can come together and agree on a set video file formats that will play cross web.

    more pulling apart and going their own way making it harder and harder to code websites.