Embedding Media - HTML5 with CSS3

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>

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>

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>

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

Home