HTML and CSS Reference
In-Depth Information
Line 1 tells the browser that a video is to be inserted and gives it
default controls. Line 2 offers an MP4 version of the video. We've
put the
mp4
first, because some old versions of Mobile Safari on
the iPad have a bug whereby they only look at the first
<source>
element, so that if it isn't first, it won't be played. We're using the
type
attribute to tell the browser what kind of container format is
used (by giving the file's MIME type) and what codec was used for
the encoding of the video and the audio stream. If you miss out
on the
type
attribute, the browser downloads a small bit of each
file before it figures out that it is unsupported, which wastes band-
width and could delay the media playing.
Notice that we used quotation marks around these parameters—
the spec uses
'video/mp4; codecs=”avc...”'
(single around the
outside, double around the codec). Some browsers stumble
when it's the other way around. Line 3 offers the WebM equiva-
lent. The codec strings for H.264 and AAC are more compli-
cated than those for WebM because there are several profiles
for H.264 and AAC, to cater for different categories of devices
and connections. Higher profiles require more CPU to decode,
but they are better compressed and take less bandwidth.
We could also offer an Ogg video here for older versions of
Firefox and Opera, after the WebM version, so those that can
use the higher-quality WebM version pick that up first, and the
older (yet still HTML5
<video>
element capable) browsers fall
back to this.
Inside the
<video>
element is our fallback message, including
links to both formats for browsers that can natively deal with
neither video type but which is probably on top of an operat-
ing system that can deal with one of the formats, so the user
can download the file and watch it in a media player outside
the browser.
OK, so that's native HTML5 video for users of modern brows-
ers. What about users of legacy browsers—including Internet
Explorer 8 and older?
Video for legacy browsers
Older browsers can't play native video or audio, bless them. But
if you're prepared to rely on plugins, you can ensure that users
of older browsers can still experience your content in a way that
is no worse than they currently get.
