HTML and CSS Reference
The Audio and Video File Babble and the Source
Element in Detail
When talking about media file types, we're really talking about two separate components: the
software used to encode and decode the audio or video stream (the codec, which is short for
compressor-decompressoror coder-decoder), and the container, which is a wrapper format
that contains the media streams and information about how the data and metadata co-exist. An
example of a container is the open source Ogg (from Xiph.Org), while an example of a codec
is VP8, a lossyvideo compression format from On2 (and Google). Technically, a codec could
be used with many different containers, and containers could wrap many different codecs, but
we tend to think of pairs of container/codecs when talking about browser support.
Audio files are containers wrapping one type of media data, the audio stream, but video files
typically wrap two different media streams: the video and the audio data streams. In addition,
containers can also support subtitles and captions, as well as the information to keep all data
Though you can embed subtitles directly into the file with some containers, HTML5 video provides
a means of incorporating external subtitle files. More on incorporating subtitles and other accessible
features in Chapter .
Just like with image containers, such as JPEG and PNG, audio and video codecs can either be
losslessor lossy. A lossless video or audio codec preserves all of the original media file's data
when it's compressed. Lossy compression techniques, however, lose data each time the data
Though most of us have the bandwidth to download lossless images such as PNGs, lossless
video is beyond even the most generous of broadband capacity, so the only codecs supported
for HTML5 video are lossy codecs. Audio, however, is different. The audio element supports
uncompressed audio files, as well as audio files with both lossless and lossy codecs.