Video and Audio - Introducing HTML5 - page 100

Line 3 offers an H.264 video. The codec strings for H.264 and
AAC are more complicated than those for Ogg because there
are several profi les for H.264 and AAC. Higher profi les require
more CPU to decode, but they are better compressed and take
less bandwidth.
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 fi le and watch it in a media player outside
the browser.
OK, so that's native HTML5 video for all 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.
Remember that the contents of the <video> element can contain
markup, like the text and links in the previous example? Because
the MP4 file type can also be played by the Flash player plugin,
you can use the MP4 movie in combination as a fallback for Inter-
net Explorer 8 and older versions of other browsers.
The code for this is as hideous as you'd expect for a transitional
hack, but it works everywhere a Flash Player is installed—which
is almost everywhere. You can see this nifty technique in an
article called “Video for Everybody!” by its inventor, Kroc Camen
http://camendesign.com/code/video_for_everybody .
Alternatively, you could host the fallback content on a video
hosting site and embed a link to that between the tags of a
video element:
<video controls>
<source src=leverage-a-synergy.ogv type='video/ogg;
¬ codecs=”theora, vorbis”'>
<source src=leverage-a-synergy.mp4 type='video/mp4;
¬ codecs=”avc1.42E01E, mp4a.40.2”'>
<embed src=”http://www.youtube.com/v/cmtcc94Tv3A&hl=
¬ en_GB&fs=1&rel=0” type=”application/x-shockwave-flash”

NOTE The content
between the tags is fall-
back content only for browsers
that do not support the
<video> element at all. A
browser that understands
HTML5 video but can't play any
of the formats that your code
points to will not display the
“fallback” content between the
tags. This has bitten me on the
bottom a few times. Sadly, there
is no video record of that.