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,793 Tutorials

How to add HTML 5 video to your site

A crash course in the new web standard

Adobe Flash is used by the vast majority of websites as a single, consistent way to watch internet-delivered video on your PC. However, with Flash comes a whole host of security and stability issues.

But now a new way to deliver video through a browser is coming to the fore, one intended to be native to the browser itself: HTML 5's tag. In this article I'll look at how the < video > tag can be used with the new generation of browsers. I'll also examine how parts of this equation - the browsers and, to some degree, the video formats themselves - are also still very much in flux.

Online video before HTML 5

I could fill a decent-size book talking about all the formats that have been used to deliver web video at one time or another: Microsoft's .avi and .wmv container formats and the gang of codecs delivered with them, Apple's QuickTime, RealNetworks' RealVideo and RealAudio formats, and so on. Microsoft's Silverlight also deserves mention, since it allows providers such as Netflix to distribute content with embedded copy protection - a feature not likely to fall out of demand as long as money changes hands for video content.

However, the video delivery system that's most widely deployed right now is Adobe's Flash.

The Flash Player was, and still is, one of the few browser add-ons that almost everyone is likely to have. Browsers on Macs and PCs alike typically support Flash by default, since a growing amount of web content in general depends on it. It could be argued that Flash has become a video-delivery system as a by-product of its original intention, which was to bring vector-based animation to the web.

But Flash has problems as a video delivery system. It's proprietary. It requires the use of third-party code rather than something native to the browser. It has been lambasted for its lack of security and instability. The list goes on. It's a solution, when people have been hungering for the solution.

Hello to the < video > tag

The history of the < video > tag starts with the Web Hypertext Application Technology Working Group (WHATWG), a consortium made up of experts from Apple, the Mozilla Foundation and Opera Software. The WHATWG was created in 2004 to focus on the development of HTML 5 as a response to what it felt was the disregard of the World Wide Web Consortium (W3C) for real-world developers vis-à-vis XHTML and the then-extant HTML standards.

The first proposals for a < video > tag were submitted to the WHATWG in 2007 by Opera Software. The idea was simple: Create a framework in which web browsers can natively play back video without being forced to fall back on third-party plug-ins. The user gets the experience of video that just works, those hosting the video have less maintenance to perform, and everyone walks away happy.

That's the theory, anyway. The practice has been another story entirely.

NEXT PAGE: The codec conundrum

  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

OnePlus Two release date rumours: Something's happening on 22 July

IDG UK Sites

13in MacBook Air review, Apple's MacBook Air 2014 reviewed

IDG UK Sites

5 reasons to buy an electric car and 5 reasons not to

IDG UK Sites

Evernote Skitch: the best way for creatives to doodle feedback