Lesson 1: Playing video CHAPTER 11 439
In this example, the <video> element size is set to 320 pixels by 240 pixels. The controls
attribute provides controls to start and stop the video, to view and set the video cursor loca-
tion, and to maximize and restore the video size on the screen. The <video> element contains
a <source> element that describes the video source as .mp4. The <video> element also con-
tains text that is displayed on browsers that don’t support the <video> element.Setting the source
The <source> element specifies a video source. At a minimum, you need to set the src attri-
bute to the URL of the video. You should also include more than one <source> element to
provide many sources so the browser can choose the most appropriate video codec. In the
following example, the same movie has been rendered for each of the three most popular
formats.
<video controls="controls" height="480">
<source src="eagle.webm" type='video/webm; codecs="vorbis, vp8"' />
<source src="eagle.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="eagle.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>When the developer provides multiple formats, the browser can choose the format it
can use to display the video, which provides the most compatible experience to users. The
position of the <source> elements is important because a browser starts looking at the top
and stops when it finds a file that it can display. The recommended order is to start with the
.webm file because it’s royalty free and open source, and it’s becoming more popular. Next,
use the .ogv file because it is also royalty free, but the quality is not as good as the .webm file.
Finally, use the .mp4 format for browsers that don’t support .webm or .ogv files.
The type attribute includes both the MIME type and the codecs. Although the type
attribute isn’t usually required, the browser can use it to help choose the proper video file to
display.
The availability of multiple video files requires the developer to transcode videos to
multiple formats. You can find web utilities at such websites as Firefogg.org that transcode a
video from one format to another, as shown in Figure 11-1.
To use the Firefogg website, you must be running Firefox and have installed the Firefogg
plug-in. This plain website produces good-quality transcoded videos.
If you prefer to use an application that you can download and install on your computer,
you might like the Miro Video Converter. This is a stand-alone utility that enables you to con-
vert one file type to another. The Miro Video Converter is shown in Figure 11-2.