HTML and CSS Reference
How to juggle all those formats…
So we know it's a messy world with respect to video format, but what to do? Depending
on your audience, you may decide to provide just one format of your video, or several. In
either case, you can use one <source> element (not to be confused with the src attribute )
per format inside a <video> element to provide a set of videos, each with its own format,
and let the browser pick the first one it supports. Like this:
Not ice we're rem oving the sr c
att ribute from the <video> tag…
<video controls autoplay width="512" height="288"
<p> Sorry, your browser doesn't support the video element </p>
For each source, the browser loads the
met adata of the video file t o see if it
can play it (whic h can be a le ngthy proces s,
alth ough we can make it easie r on the
bro wser…see the next page).
The container is the file format that's used to package up the video, audio,
and metadata information. Common container formats include: MP4,
WebM, Ogg, and Flash Video.
The codec is the software used to encode and decode a specific encoding
of video or audio. Popular web codecs include: H.264, VP8, Theora, AAC,
The browser decides what video it can decode. Not all browser makers
agree, so if you want to support everyone, you need multiple encodings.