Implementing media controls in HTML5

Using the <video> element

You can use to control video either declaratively, through static HTML, or dynamically, using JavaScript.

First, you need to examine the key attributes available to use on the <video> element as listed in the table below:

Atribute 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.

Default controls provide:

  • a play/pause button
  • a timer shows the current video position
  • the audio control button
  • a control that enables the video at full-screen size

You need to ensure that you provide options to the browser so that it can choose which video format to play. You also need to provide an alternative or at least the information that the user’s browser doesn’t support this video.

The following code demonstrates this:

<video controls="controls" poster="image.jpg" loop autoplay>
    <source src="media/video.webm" type="video/webm" />
    <source src="media/video.ogv" type="video/ogg" />
    <source src="media/video.mp4" type="video/mp4" />
                       
    <p>Your browser does not support HTML5 video.</p>
</video>

The <video> element supports multiple <source> elements, so you can include one for each video type. 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.

The <video> element offers many methods. The table below outlines the more common ones.

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.

Using the <audio> element

The <audio> element is essentially identical to the <video> element. It has all the same attributes and the same methods.

The following code demonstrates the <audio> element:

<audio controls="controls">
    <source src="media/PolymorphicPodcast-clip.mp3" type="audio/mpeg" />
    <source src="media/PolymorphicPodcast-clip.ogg" type="audio/ogg" />
                         
    <p>Your browser does not support HTML5 audio.</p>
</audio>

From left to right, you get a pause/play button, the counter, a progress bar, the total time in the audio, and a volume slider bar.

Ads Right