HTML and CSS Reference
In-Depth Information
To add the
Royal Wedding
video:
◗
1.
Return to the
jumbo.htm
file in your Web browser.
◗
2.
Directly below the h2 heading,
In Focus
, insert the following code (see Figure 7-21):
You must include the
video source in both the
MP4 and WebM formats
to ensure support across
all of the major browsers.
<video>
<source src=”rwdance.mp4” />
<source src=”rwdance.webm” />
</video>
Figure 7-21
using the HtMl5 video element
file ve
r
sion in
MP4 format
file vers
ion in
WebM format
◗
3.
Save your changes to the file.
The
video
element supports many of the same attributes as the
audio
element. For
example, to display video controls, you add the attribute
controls=”controls”
to the
<video>
tag. Figure 7-22 describes the other
video
attributes supported in HTML5.
Figure 7-22
attributes of the video element
Attribute
Description
audio=”muted”
Mutes the audio track of the video clip
autoplay=”autoplay”
Starts playing the video clip as soon as it is downloaded
controls=”controls”
Displays the video controls
height=”
value
”
Sets the height of the video clip in pixels
loop=”loop”
Automatically restarts the video clip when it is finished playing
poster=”
url
”
Specifies the
url
of an image that represents the video
preload=”
type
”
Specifies whether the video clip should be preloaded by the browser,
where
type
is
auto
(to load the entire clip),
metadata
(to preload only
descriptive data about the clip), or none (not to preload the video clip)
src=”
url
”
Specifies the source of the video clip, where
url
is the location and name
of the video file
width=”
value
”
Specifies the width of the video clip in pixels
As you did with the audio clip, add controls to the video clip, format the style of the
video clip, and then display it in your browser.