HTML and CSS Reference
Using the <video> element
Embedding video into a webpage has become very popular, and many websites now include
a video element in their design. HTML5 has made including video in your webpages much
easier than it was previously. Here, you learn about the new <video> element provided by the
HTML5 standard and look at the available attributes and events you can use to control video
Embedding a video in the page is as simple as adding the following markup:
<video src="samplevideo.mp4" autoplay> </video>
That's the bare minimum. However, you know that the bare minimum is rarely enough for
a professionally designed website. You need to work with more properties and events. You
also need to consider browser support for various video formats. First, you need to examine
the key attributes available to use on the <video> element, as listed in Table 1-4.
TABLE 1-4 Attributes available on the <video> element
This attribute specifies the video to play. It can be a local resource within your own
website or something exposed through a public URL on the Internet.
This attribute tells the browser to start playing the video as soon as it loads. If this
attribute is omitted, the video plays only when told to through player controls or
This attribute tells the browser to include its built-in video controls, such as play and
pause. If this is omitted, the user has no visible way to play the content. You would
These attributes control the amount of space the video will occupy on the page.
Omitting these causes the video to display in its native size.
This attribute tells the browser to continuously play the video after it completes. If
this attribute is omitted, the video stops after it plays through completely.
This attribute specifies an image to show in the place allocated to the video until the
user starts to play the video. Use this when you're not using autoplay . It's very useful
for providing a professional image or artwork to represent the video. If it's omitted,
the poster appears in the first frame of the video.
With all this new information about the available attributes, you can provide a bit more
detail in your <video> element to control how you would like it to behave:
<video src="samplevideo.mp4" controls poster="picture.jpg" height="400" width="600">
The preceding <video> element specifies that it should initially display a poster image, sets
the height and width parameters, and indicates that the default controls should be available.
The absence of a loop attribute means that when the video is finished, it shouldn't repeat
automatically. And the absence of an autoplay attribute tells the browser that you don't want
the video to start playing automatically; instead, it should wait until the user invokes the play