Inserting Video - HTML5 - page 228

As promised, there are some additional, video specific attributes. Within each <source> tag is a
rather robust type attribute that details both the video format — like video/mp4 — and the codecs
used in the encoding of the video. The codecs portion of the type attribute lists the video codec
first, followed by the audio one, for example, type=”video/webm; codecs='vp8, vorbis'” . Note
the careful use of double and single quotation marks within the attribute. Additionally, the final
codec for Ogg Theora employs character entities for the quote character — &quot; — instead of
actual quotes so that it can be read properly by Firefox.
A bug in the iPad and iPhone implementation of the <video> tag allows those
systems to recognize only the first <source> tag. Because they use a Safari-based
browser, be sure to put your .mp4 format first.
For the ultimate in cross-browser compatibility, you can take the <video> tag implementation one
step further by including a Flash fallback. If your site visitor uses an older browser that does not rec-
ognize the <video> tag, it will be ignored and the Flash Player, invoked through the <object> and
<embed> tag method, will be used. Here's how that code might look:
<video width=”320” height=”240” controls=”controls”>
<source src=”assets/vesta.mp4” type=”video/mp4; codecs='avc1.42E01E,
mp4a.40.2'” />
<source src=”assets/vesta.webm” type=”video/webm; codecs='vp8, vorbis'” />
<source src=”assets/vesta.ogv” type=”video/ogg; codecs=&quot;theora,
vorbis&quot;” />
<object id=”player1” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”
width=”480” height=”270”>
<param name=”movie” value=”player.swf” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”opaque” />
<param name=”swfversion” value=”6.0.65.0” />
<param name=”flashvars” value=”file=assets/vesta2.flv&autostart=true” />
<param name=”allowfullscreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<embed flashvars=”file=assets/vesta.flv&autostart=true”
allowfullscreen=”true” allowscriptaccess=”always” id=”player1” name=”player1”
src=”player.swf” width=”480” height=”270” />
</object>
</video>
Want to make sure everyone has access to your video? Add a link to a downloadable video, perhaps
in a QuickTime .mov format, in between the closing </object> and </video> tags. Now your
video bases are truly covered!