HTML and CSS Reference
In-Depth Information
host, too. Currently, Flash remains the most popular approach for presenting video on the
web, but with HTML5, browsers are beginning to add native support for video playback
through the
<video>
tag.
The current generation of mobile devices that are capable of video playback (like the
iPhone and phones based on Google's Android operating system) support the HTML5
<video>
tag and in most cases do not support Flash. So, the best approach for providing
video to the widest number of users is to use both the
<video>
tag and a Flash player.
After introducing the
<video>
tag, I'll explain how to use it with a Flash movie in such a
way that users only see one video player—the appropriate one for their environment.
The
<video>
Tag
The
<video>
tag is new in HTML5. It is used to embed a video within a web page, and
to use the browser's native video playback capabilities to do it, as opposed to Flash or
some other plug-in. Here's a simple version of the
<video>
tag:
<video src=”myvideo.mp4”>
If the browser is capable of playing the video at the URL specified in the
src
attribute, it
will do so. Or it would, if there were some way of telling the browser to play the video.
In this case, the video will have no controls and won't start playing automatically. To
take care of that, I need to use some of the attributes of the
<video>
tag, which are listed
in Table 12.1.
TABLE 12.1
<video>
Attributes
Attribute
Description
12
The URL for the video to be played.
src
The height of the element.
height
The width of the element.
width
Boolean attribute that indicates that the browser should supply
its own controls for the video. The default is to leave out the
controls.
controls
Boolean attribute that indicates that the video should play imme-
diately when the page loads.
autoplay
Boolean attribute. If present, the video will loop when it reaches
the end, replaying until the user manually stops the video from
playing.
loop
Boolean attribute. If present, the browser will begin downloading
the video as soon as the page loads to get it ready to play.
Ignored if
autoplay
is present.
preload
