HTML and CSS Reference
In-Depth Information
The HTML5 <video> Tag
Until now, there has not been a standard for showing a video on a Web page —
most videos are shown through a plug-in (like Adobe Flash). The problem is that different
browsers may have different plug-ins or only recognize specific video formats. There
are three different tags that you can use to incorporate video: <embed>, <object>, and
<video>. You would have to add all three elements and utilize different video formats to
make sure your video will play in all browsers (Internet Explorer, Chrome, Firefox, Safari,
Opera) and on all hardware (PC, Mac, iPad, iPhone). In this project, we will discuss the
embed and object elements and we will utilize the video element to add a video clip.
The purpose of the <embed> tag is to embed multimedia elements in HTML pages.
The problems with the <embed> tag are: it is unknown to HTML 4 and will not validate
correctly; if the browser does not support Flash, your video will not play; iOS devices
such as the iPad and iPhone cannot display Flash videos; and, if you convert the video to
another format, it will still not play in all browsers.
The purpose of the <object> tag is to embed multimedia elements in HTML pages.
The chapter contains a significant amount of information about the object element.
Although the code with an <object> tag will validate correctly, there are also problems
associated with this option: if the browser does not support Flash, your video will not
play; iOS devices such as the iPad and iPhone cannot display Flash videos; and if you
convert the video to another format, it will still not play in all browsers.
Using the <video> Tag
HTML5 defines a new element that specifies a standard way to embed a video or
movie on a Web page: the video element. The tag is used to specify a video, such as a
movie clip or other video streams. It is supported by most browsers, but review Table 8-2
on page HTML 369 to see what formats the video element supports. Just as with audio
clips, there are numerous software applications that allow you to convert video from one
format to another. There are, however, problems with using the video element: you must
convert your videos to one of the supported formats; the video element does not work in
older browsers; and the video element does not validate in HTML 4 and XHTML. Table
8-8 lists the attributes and values that can be used with the <video> tag.
Table 8-8 Attributes for <video> Tag
Attribute
Value
Description
autoplay
autoplay
Specifies that the video will start playing as soon as it is ready
controls
controls
Specifies that video controls should be displayed (such as a play/pause button, etc.)
height
pixels
Sets the height of the video player
loop
loop
Specifies that the video will start over again, every time it is finished
muted
muted
Specifies that the audio output of the video should be muted
poster
URL
Specifies an image to be shown while the video is downloading, or until the user
hits the play button
preload
auto
metadata
none
Specifies if and how the author thinks the video should be loaded when the page
loads
src
URL
Specifies the URL of the video file
width
pixels
Sets the width of the video player
