HTML and CSS Reference
In-Depth Information
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"
src="video/tweetsip.mp4">
<source src="video/tweetsip.mp4">
<source src="video/tweetsip.webm">
<source src="video/tweetsip.ogv">
<p>
Sorry, your browser doesn't support the video element
</p>
</video>
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,
and Vorbis.
The browser decides what video it can decode. Not all browser makers
agree, so if you want to support everyone, you need multiple encodings.
