HTML and CSS Reference
In-Depth Information
<source src=”movie.ogv”
type='video/ogg; codecs=”theora, vorbis”'>
</video>
FIGURE 12.10
A video embedded
using the
<video>
tag with
<source>
tags
with controls.
As you can see, in this case I've left the
src
attribute out of my
<video>
tag. Instead,
I've nested two
<source>
elements within the tag instead. The
src
attribute of
<source>
contains the URL a video file, and the
type
attribute provides information to the browser
about the format of that file. The browser examines the types of each of the movie files
and chooses one that is compatible.
The syntax of the
type
attribute can be a little bit confusing because of the punctuation.
Here's the value:
video/ogg; codecs=”theora, vorbis”
The first part is the MIME type of the video container. The second part lists the codes
that were used to encode the audio and video portions of the file. So in this case, the con-
tainer type is
video/ogg
, the video codec is
theora
, and the audio codec is
vorbis
. If
the browser supports both the file type and the codecs, it will use that video file. The val-
ues for the
type
attribute are as follows:
MP4/H.264
—
video/mp4; codecs=”avc1.42E01E, mp4a.40.2”
n
Ogg Theora
—
theora, vorbis
n
WebM
—
vp8, vorbis
n
The
<object>
tag is used to embed media of all kinds in web pages. Although it is most
often used to embed Flash movies, it can also be used for audio files, video files, images,
and other media types that require special players. Unlike all the other HTML tags
you've learned about so far, the
<object>
tag works differently from browser to browser.
