Chapter 5. Video on the Web

Diving In

Anyone who has visited YouTube.com in the past four years knows that you can embed video in a web page. But prior to HTML5, there was no standards-based way to do this. Virtually all the video you’ve ever watched “on the Web” has been funneled through a third-party plug-in—maybe QuickTime, maybe RealPlayer, maybe Flash. (YouTube uses Flash.) These plug-ins integrate with your browser well enough that you may not even be aware that you’re using them—until you try to watch a video on a platform that doesn’t support that plug-in, that is.

HTML5 defines a standard way to embed video in a web page, using a <video> element. Support for the <video> element is still evolving, which is a polite way of saying it doesn’t work yet (at least, it doesn’t work everywhere). But don’t despair! There are alternatives and fallbacks and options galore. Table 5-1 shows which browsers support the <video> element at the time of writing.

Table 5-1. <video> element support

IE9

IE8

IE7

Firefox 3.5

Firefox 3.0

Safari 4

Safari 3

Chrome

Opera

✓

·

·

✓

·

✓

✓

✓

✓

Support for the <video> element itself is really only a small part of the story. Before we can talk about HTML5 video, you first need to understand a little about video itself. (If you know about video already, you can skip ahead to What Works on the Web.)

Get HTML5: Up and Running now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.