HTML and CSS Reference
In-Depth Information
FIGURE 12.9
A
<video>
tag
with a different
aspect ratio than
the embedded
video file.
I set the background color of the
<video>
element to black to make it clear where the
browser puts the extra space when the movie's aspect ratio does not match the aspect
ratio of the element.
Finally, if you're fairly certain that most people who come to your page will want to
view the video, but you want to let them play the video themselves, you may want to
include the
preload
attribute, which tells the browser to go ahead and download the
video when the page loads but to wait for the user to play the video. Usually this means
users will not have to wait as long to see the video after they try to play it, but the disad-
vantage is that you'll use bandwidth sending the video to everyone, whether they actually
play the movie.
Using the
<source>
Element
There are two major drawbacks to using the
<video>
tag. The first is that all browser
support is limited. Versions 8 and earlier of Internet Explorer do not offer support for
<video>
, nor does Firefox 3.0. The second is that even among browsers that support the
<video>
tag, not all of them support the same video containers or codecs. As you've
seen, this problem requires you to encode your videos in multiple formats if you want to
reach most browsers, but the good news is that the
<video>
element provides a means of
dealing with this issue so that your users won't notice.
12
To embed a single video file, you can use the
src
attribute of the video tag. To provide
videos in multiple formats, use the
<source>
element nested within your
<video>
tag.
Here's an example, the results of which are shown in Figure 12.10:
<video width=”320” height=”240” preload controls>
<source src=”movie.mp4”
type='video/mp4; codecs=”avc1.42E01E, mp4a.40.2”'>
