demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Web Multimedia: codecs and containers

html / multimedia

Estimated reading time: 3 minutes, 7 seconds

In my experience, many web developers have a poor understanding of digital video technologies; as a result, the file size of the video they produce tends to be huge, and completely inappropriate for the web. Thus, my attempt at a guide.

In general, people trying to optimize video suffer from the same ignorance as those trying to optimize bitmap images: they do not understand appropriate format and compression. In video this is complicated by a common confusion between codec and container.

In general, people trying to optimize video suffer from the same ignorance as those trying to optimize bitmap images: they do not understand appropriate format and compression. In video this is complicated by a common confusion between codec and container.

codec

A codec (for compressor-decompressor) is the algorithm used to lower file size. JPEG is a codec that is primarily used for still images; the MPEG codec is the equivalent for video.

Some typical video codecs include:

codec NameRelease dateDescriptionUses
MPEG-11993

One of the oldest video standards, released in 1993 and now widely deployed. Its goal was to enable video playback from CD’s. Relatively low visual quality coupled with high file sizes meant that video standards quickly moved to MPEG 2. Layer 3 of the MPEG 1 codec is the basis for the popular .mp3 audio format

Video CD, SVCD, some low-quality DVD.
MPEG-21995

The world’s most popular codec, in terms of market penetration: every commercial DVD-video uses MPEG-2, as do most commercial digital cable and OTA television stations.

DVD, television. Some web video.
MPEG-41998

Significantly improved and more efficient codec. Actually contains two families of codecs (MPEG-4 Part 2 and MPEG-4 AVC / H.264.

MPEG-4 Part 2 codecs include: DivX, Xvid, FFmpeg MPEG-4 and 3ivx.

H.264 includes the eponymous codec, as well as x264 (an open-source encoder-only version of H.264), Divx Pro and Apple’s implementation of H.264.

Blu-Ray and HD-DVD; some web video.
WMV1999

Windows Media Video. Comes in several versions (WMV 7 – 9). WMV9 is standardized as the VC-1 codec.

Windows Media Files, limited use in Blu-Ray and HD-DVD
VP6 ~ VP82003

Proprietary codec by On2 Technologies; the most recent version (VP8) has been open-sourced by Google.

Limited use in web video.
Sorenson 32001

A codec made popular by its association with QuickTime; essentially the ancestor to H.264.

Web video, particularly movie trailers, but now superseded by H.264

Generally speaking the more recent the codec the better the compression, bandwidth use and image quality, and thus the smaller the file size; H.264 is better than MPEG-2 on almost all counts. On the other hand, older codecs tend to have a wider range of support: almost every piece of digital AV equipment made in the last fifteen years understands MPEG2; fewer understand H.264. As always, choices are a tradeoff between ubiquity and efficiency.

container

A container is a “wrapper” format around encoded media. A container format, in and of itself, does not say anything about the type of media inside of it, or the codec used to compress that media, although there may be strong associations between certain codecs and containers.

Some examples of containers used for video are: Quicktime (.mov), Windows Media Video (.wmv), Audio Video Interleave (.avi), Real Media (.rm), Matroska (.mkv) and Flash Video (.flv or .f4v).

Again, it is very important to distinguish between container and codec. The codec is the method with which media is encoded; the container is the wrapper around the content. The container format often implies that a particular application should be used for playing back the content (QuickTime for .mov, Flash Player for .flv, etc).

One reason that many people get confused between containers and codecs is that either may be used as the suffix of a file. For example, test-movie.mov is a container file that could contain anything at all; test.mp4 is a video file encoded in H.264 MPEG-4.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.