We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message
2,842 Tutorials

How to add HTML 5 video to your site

A crash course in the new web standard

We look at just to add HTML 5 video to your website

Falling back to Flash

So what happens if the page is accessed by users who don't have < video > tag support in their browsers? For them, you'll need to provide a way to allow the page to serve up a Flash-encoded version of the video. The good news is that there's a way to do this that is a legitimate behaviour of the < video > tag, not a by-product of some other behaviour or a browser-specific quirk.

The way this works is fairly clever: The Flash object is embedded within the < video > tag itself. If the browser supports < video >, it attempts to use a stream from the tags. If none of those work, the tag that points to a Flash player is invoked, and the other elements are automatically ignored.

For an example of this, check out a template called Video for Everybody, created by the folks at Camen Design. It not only falls back elegantly from HTML 5 to Flash but will also work in HTML 4 by degrading to Flash as a fallback, too.

Other third-party packages serve up the < video > tag in different sauces of HTML 5, JavaScript or Flash, depending on what additional effects you want to invoke. For example, the Projekktor project lets you embed a fairly advanced media player in a webpage with all sorts of extensions - such as the ability to refer to an existing YouTube video. HTML 5 is used by default, but Flash works as a fallback when needed. Projekktor's code is GPL2-licensed, so it can be used and redistributed freely as-is.

Note that you have to supply the Flash player yourself: You can't just tell Flash to stream a video file. On the plus side, the current edition of Flash streams H.264 natively, so if you already have an H.264 encode you can simply re-use that.

Conclusion

The biggest obstacle the < video > tag faces is how each browser chooses to implement it -- what codecs are supported and how they're presented to the end user. It's all in flux, and that means any current implementation might change as the browsers themselves evolve over the next revision and beyond.

It's likely that we'll see two tiers of content that use the < video > tag: H.264-encoded content hosted by professional services and portals, such as YouTube and Vimeo, and open-standards content encoded in WebM and Theora, hosted wherever there's bandwidth and space to spare.

The important thing is that they'll exist side by side, powered by the same in-browser technology. If one does emerge as the standard, if only in a de facto fashion, it won't be for lack of competition.

See also: HTML5: 9 ways it will change the web

  1. Introduction
  2. The codec conundrum
  3. Theora and VP8
  4. How to add HTML 5 to your site
  5. Theora and WebM tools
  6. Using the < video > tag
  7. Falling back to Flash
IDG UK Sites

Samsung Galaxy Tab S 8.4 review: The best iPad mini and Nexus 7 rival tablet around

IDG UK Sites

Which Mac? Complete Apple Mac buyers guide for 2014

IDG UK Sites

Mobile email is powerful and useful - but also hopelessly intrusive

IDG UK Sites

Samsung lights up London skyline with Midnight Rainbow