HTML5 and CSS3, Second Edition

7.2 Containers and Codecs

When we talk about video on the Web, we talk in terms of containers and

codecs. You might think of a video you get off your digital camera as an AVI

or an MPEG file, but that’s an oversimplification. A container is like an enve-

lope that holds audio streams, video streams, and sometimes additional

metadata such as subtitles. These audio and video streams need to be

encoded, and that’s where codecs come in. Video and audio can be encoded

in hundreds of different ways, but when it comes to HTML5 video, only a few

matter.

Video Codecs

When you watch a video, your video player has to decode it. Unfortunately,

the player you’re using might not be able to decode the video you want to

watch because the video was encoded using a format your player can’t read.

Some players use software to decode video, which can be slower or more CPU-

intensive but can often play a wider range of formats. Other players use

hardware decoders and are thus limited in what they can play. You need to

know about three video formats if you want to start using the HTML5 <video>

tag in your work today: H.264, Theora, and VP8. Each format is a little differ-

ent, and unfortunately for us, browsers each support different formats.

Video Codecs and Supported Browsers

H.264

[C3, F21 (Windows 7+), S4, IE9, iOS]

Theora

[F3.5, C4, O10]

VP8

[C5, F4, S6 and IE9 (if codec installed), O10.7]

H.264

H.264 is a high-quality codec that was created by the MPEG group, and

standardized in 2003. To support low-definition or low-bandwidth devices

such as mobile phones while also handling video for high-definition devices,

the H.264 specification is split into various profiles. These profiles share a

set of common features, but higher-end profiles offer additional options that

improve quality. For example, the iPhone and Flash Player can both play

videos encoded with H.264, but the original iPhone supported only the lower-

quality “baseline” profile, while Flash Player supports higher-quality streams.

report erratum • discuss

Containers and Codecs • 133

Download from Wow! eBook <www.wowebook.com>