HTML and CSS Reference
In-Depth Information
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
Plays the video from its current position.
play()
Pauses the video at its current position.
pause()
Allows the user to control the volume of the video.
volume
Represents the current position of the video. Increase or descrease this value to
move forward or backward in the video.
currentTime
You've learned all about how to display video in your webpages. Now turn your attention
to playing sounds using the <audio> element.
Using the < audio > element
The <audio> element is essentially identical to the <video> element. It has all the same at-
tributes and the same methods. The only real difference is how it displays in the browser.
Because no video is available to show, the <audio> element occupies no screen space. How-
ever, you can show the default controls—or you can again choose not to show the default
controls and to create your own mechanism to control the audio, either through custom user
 
Search WWH ::




Custom Search