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

Listing 9-31. MPEG-4 Plackback
<video controls="controls">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' 
onerror="fallback(this.parentNode)" />
<object data="videoplayer.swf">
<param name="flashvars" value="video.mp4" />
<p>Download the <a href="video.ogv">sample video</a> (OGV)</p>
</object>
</video>
Some browsers cannot stream the video or automatically download the whole video file even if playback has
not been started yet. One of the exceptions is Firefox 3.6+, which downloads only a fragment necessary to determine
duration and render a frame from the video. This behavior can be overridden by the preload attribute. The none
attribute value forces the browser to avoid downloading. The metadata attribute value hints that enough data should
be downloaded only to show a frame and determine duration. The auto value downloads the whole video. The effect
of preload="none" can be simulated in browsers that do not support it by omitting the src attribute and source
elements that are provided only if the user clicks a button (Listing 9-32).
Listing 9-32. Loading Video on User Click
<video controls="controls">
Video not supported
</video>
<input type="button" value="Load video" 
onclick="document.getElementsByTagName('video')[0].src = 'video.mp4';" />
Additionally, customized controls can also be added to the video embedding since the DOM API for video
in (X)HTML5 supports several events that can be handled through JavaScript. Listing 9-33 shows an example.
Listing 9-33. Customized Video Controls
<script>
var video = document.getElementsByTagName('video')[0];
</script>
<input type="button" value="Play" onclick="video.play()" />
<input type="button" value="Pause" onclick="video.pause()" />
Playback can be started automatically by the autoplay attribute of the video element (Listing 9-34).
Listing 9-34. Video Playback to Be Started Automatically
<video src="abc.mp4" autoplay ="autoplay" ></video>
However, not all users want to download the video, and a start button is usually preferred. Additionally, if there
are multiple videos on the same page, automatic playing is out of the question, especially if there are at least two that
are not mute.
Currently, the src attribute value of the video tag should be a physical file, which makes it impossible to embed
your favorite video from YouTube directly. For example, the code in Listing 9-35 cannot be used.