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
src 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.
autoplay 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.
controls 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.
height/width 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.
loop 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.
poster 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">
</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
ptg14200515 operation with the controls or until you invoke the play operation with JavaScript. When you
do include the default controls, the user gets a basic set. Figure 1-23 shows what the default controls look like in Internet Explorer.
FIGURE 1-23 The default Internet Explorer media controls
From left to right, the default controls provide a play button that changes to a pause but-ton while the video is playing. A timer shows the current video position and how much time remains in the video. A slider bar lets users navigate to a specific point in the video. The audio control button pops out a volume slider bar when pressed, and finally, at the far right, is a control that enables users to display the video at full-screen size.
So far, so good—for Internet Explorer users. But you also need to ensure that your video will play successfully in other browsers. The problem is that not all browsers support all video formats. Keep this in mind as you implement your <video> elements; what each browser supports can (and will) change as well. You need to ensure that you provide options to the browser so that it can choose which video format to play. If you don’t have all the appropriate supported video formats and your page happens to get a visitor with a browser that can’t play the video format you have, you also need to provide an alternative or at least the infor-mation that the user’s browser doesn’t support this video. The following code demonstrates this:
<video controls height="400" width="600" poster="picture.jpg">
<source src="samplevideo.ogv" type="video/ogg"/>
<source src="samplevideo.mp4" type="audio/mp4"/>
<object>
<p>Video is not supported by this browser.</p>
</object>
</video>
This sample removed the src attribute from the <video> element and added child
<source> elements instead. The <video> element supports multiple <source> elements, so you can include one for each video type. A browser goes through the <source> elements from top to bottom and plays the first one that it supports.
Notice that the example also has an <object> element to cover the possibility that the client browser has no support for the <video> element at all. In such cases, you could have a Flash version of the video to play; but if no other version of the video is available to play, you can just display a message that video isn’t supported, as shown in the code snippet. Browsers that don’t support the <video> element ignore the element altogether but show the <object>
element that they do understand. This lets older browsers “fall back” to previous methods for displaying video, ensuring that you can reach as many users as possible.
Finally, the <p> element is a last resort to provide at least some information to users that a video is supposed to be playing here but that their browser doesn’t support it.
ptg14200515 EXAM TIP
If the browser supports the HTML5 video element, it doesn’t show the fallback. In this case, make sure that you have the valid <source> element specified for that browser. If you don’t, the video container shows an error in place of the control bar, saying that an invalid link or file is specified.
Sometimes having more control over things is nice, or perhaps you just don’t like the look and feel of the default controls. This is where JavaScript comes in. You can create your own control bar and substitute your own control buttons to enable users to control the video.
The following example adds a few custom image elements to the page and wires up some JavaScript to control the video:
ptg14200515 This HTML produces the media controls shown in Figure 1-24.
FIGURE 1-24 A custom media control bar
As you can see, the code has created a little custom control bar and positioned it to the right of the video frame. The <video> element offers many methods. Table 1-5 outlines the more common ones.
TABLE 1-5 Methods and properties on the <video> object
Method/property Description
play() Plays the video from its current position.
pause() Pauses the video at its current position.
volume Allows the user to control the volume of the video.
currentTime Represents the current position of the video. Increase or descrease this value to move forward or backward in the video.
You’ve learned all about how to display video in your webpages. Now turn your attention to playing sounds using the <audio> element.