HTML and CSS Reference
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:
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
The URL for the video to be played.
The height of the element.
The width of the element.
Boolean attribute that indicates that the browser should supply
its own controls for the video. The default is to leave out the
Boolean attribute that indicates that the video should play imme-
diately when the page loads.
Boolean attribute. If present, the video will loop when it reaches
the end, replaying until the user manually stops the video from
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.