HTML and CSS Reference
In-Depth Information
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.
Search WWH ::
Custom Search