HTML and CSS Reference
In-Depth Information
The video element may also contain one or more source elements, each pointing to a different video
source. The battle over competing video formats is as heated as it is for audio formats, and as usual the
browsers haven't come to an agreement. The three leading formats are MP4 (which uses the patent-
encumbered H.264 codec), the open source Ogg Theora (Theora is the video codec, Ogg is the container
format) and WebM (a newer open format quickly gaining ground; it uses a codec called VP8). Safari, IE,
and Chrome support MP4, while Firefox, Opera, and Chrome support both Ogg Theora and WebM—once
again, Chrome covers all their bases. To reach the widest audience you'll have to offer at least two video
sources, if not all three, like you see in Listing 5-5.
Listing 5-5. A video element with three source elements, offering the same video in three formats
<video controls>
<source src="video/laserblast.webm" type="video/webm">
<source src="video/laserblast.ogv" type="video/ogg">
<source src="video/laserblast.mp4" type="video/mp4">
A video element can also carry a preload attribute, just like audio , and it accepts the same values:
auto , metadata , or none . You should only preload media (either audio or video) if you're relatively certain
your users will want to play that media when they arrive at the page, perhaps if they've had to drill down
through some navigation to reach it and the media itself is the main reason they're coming. Otherwise you
shouldn't tax their bandwidth by automatically sending a lot of data they may not need. You should also
avoid preloading media when there are multiple media elements on a page; it's a bit rude to make your
users download a dozen videos at once if they didn't ask for it.
So far the video element works just like the audio element, with most of the same attributes. But unlike
an audio file, videos take up space on a rendered page. You can include the width and height of your
video, just as you would for an image, with the width and height attributes:
<video controls preload="auto" width="400" height="300" >
<source src="video/Pod_People.webm" type="video/webm">
<source src="video/Pod_People.ogv" type="video/ogg">
<source src="video/Pod_People.mp4" type="video/mp4">
Unless you use the autoplay attribute to begin playback as soon as the page loads (usually a bad idea)
an embedded video will initially show the first frame of the source video. But more often than not, that first
frame won't be much to look at, and may not be indicative of the video's content. You can instead provide
a placeholder image with the poster attribute, the value of which is the URL of the image:
<video controls width="400" height="300" poster="images/Pod_People.jpg" >
<source src="video/Pod_People.webm" type="video/webm">
<source src="video/Pod_People.ogv" type="video/ogg">
<source src="video/Pod_People.mp4" type="video/mp4">
Like native audio, native embedded video is a new feature in HTML5 and only supported by the latest
browsers. But just like audio, you can offer a Flash-based fallback video player, as well as direct download
links for anyone without Flash. Listing 5-6 is a full-featured example of the video element, complete with
three formats and fallback content for older browsers or those without Flash.
Search WWH ::

Custom Search