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.
Search WWH ::




Custom Search