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

How to add HTML 5 video to your site

A crash course in the new web standard

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

Using the < video > tag

Codecs aside, the most important thing about using video in HTML 5 is the construction of the < video > tag itself. In a perfect world, you'd just need to point to the video stream in question, like this:

But in our less-than-perfect world, the < video > tag sports a whole bevy of options that you choose from to ensure that your videos play back correctly across browsers and platforms. That said, most of this complexity exists for a good reason.

To illustrate this, here's an example of a < video > tag:

The outer elements of the < video > tag have several options:

  • WIDTH / HEIGHT: The width and height of the video, in pixels.
  • CONTROLS: Add this option to show playback controls on the video.
  • PRELOAD: Tells the browser to start downloading (but not playing) the video as soon as the page is loaded. Use PRELOAD="none" to explicitly tell the browser not to preload the video.
  • AUTOPLAY: Include this to start playback of the video automatically.

The subtag lets you specify which video file, or files, to play back. If you specify more than one file via multiple tags, the browser will attempt to load each file in turn. In the above example, the .MP4 file (an H.264 stream) will be loaded first; if the browser can't play that one, the .OGV (Theora) stream is loaded next, and so on. There's no practical limit to the number of tags you can provide, but more than three is probably impractical.

The most complicated and problematic option for the tag is the TYPE parameter, which describes to the browser the exact combination of codecs needed to play a particular video. This way the browser doesn't have to start downloading the video and perform its own codec detection on it (which may well be flawed) to figure out whether or not it can even play the video in question. If the browser knows in advance it can't play back a certain type of stream, it doesn't download it. You and the people viewing your videos will save a lot of bandwidth in exchange for a bit of hassle on your part.

For Theora and WebM codecs, the TYPE parameters are simple enough; the above examples encompass the most common scenarios. For H.264, though, the options become quite complicated because H.264 streams can be encoded in a number of profiles, and the TYPE descriptor has to match the profile used to encode the file. If you're using only one profile for all your videos, you can create the profile string once and forget about it; if not, you'll need to find some way to ensure the right TYPE string is associated with the file in question (e.g., via metadata in a content management system).

One other extremely important thing that many webmasters overlook is the MIME type for the files. Firefox, for instance, is extremely dependent on MIME types for determining what to do with a given file. To that end, use the following MIME types when configuring your web server:

NEXT PAGE: Falling back to Flash

  1. A crash course in the new way to put video on the web
  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

Top 5 Android tips and tricks for smartphones and tablets

IDG UK Sites

How to join Apple's OS X Beta Seed Program: Get OS X Yosemite on your Mac before public release

IDG UK Sites

Why the BBC iPlayer outage was caused by a DDoS attack: Topsy and Tim isn't *that* popular

IDG UK Sites

BBC using Glasgow 2014 Commonwealth Games to trial 4K/UHD, pan-around video, augmented video and...