Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 340

Listing 9-26. Additional Properties and Alternate Content for (X)HTML5 Video Embedding
<video src="sample.ogv" width="320" height="240" poster="sample.jpg">
<p>Download the <a href="video.ogv">sample video</a> (OGV, 5.34 MB)</p>
</video>
Video controls can be shown or hidden in the browser by using the controls attribute on the video element
(Listing 9-27).
Listing 9-27. Controls Set to Be Displayed for (X)HTML5 Video Embedding
<video src="xyz.mov" controls="controls" >
</video>
Since the video codec support is different in each browser, the same video can be provided in various formats,
avoiding the need to download videos that cannot be played on the system. Listing 9-28 shows an example.
Listing 9-28. The Same Video in Different Formats
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
<p>Download the <a href="video.ogv">sample video</a> (OGV)</p>
</video>
However, the MIME type cannot reflect the codecs of videos stored in container formats (for example, H.264 in
MPEG-4). They can be provided by the codecs parameter (Listing 9-29).
Listing 9-29. Declaring Video Codecs in (X)HTML5
<video controls="controls">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' />
<p>Download the <a href="video.ogv">sample video</a></p>
</video>
Care must be taken to apply single and double quotes alternately for the type attribute values.
The video element of (X)HTML5 provides playback support detection, including the canPlayType() method on
the media element or the onerror event listener. Listing 9-30 is an example of the second method.
Listing 9-30. Video Plackback Support Detection in (X)HTML5
<video controls="controls">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' 
onerror="fallback(this.parentNode)" />
<p>Download the <a href="video.ogv">sample video</a> (OGV)</p>
</video>
Since the video support in browsers varies, there is no ultimate cross-browser video-embedding code.
Although one of the major advantages of the video element is to eliminate the object element and plug-in
declaration in video embedding, the object element can still be useful sometimes. If plug-ins are preferred to simple
error messages, the object element can be embedded into the video element. Flash supports MPEG-4/H.264/AAC
playback, so an .mp4 file can usually be played by the code presented in Listing 9-31.