HTML and CSS Reference
In-Depth Information
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
either declaratively, through static HTML, or dynamically, using JavaScript.
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
Attribute
Description
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.
src
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
JavaScript.
autoplay
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
use
autoplay
or provide some other mechanism through JavaScript to play the video.
controls
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.
height/width
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.
loop
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.
poster
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">
</video>
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
Search WWH ::
Custom Search