Media in HTML5

HTML5 introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed media into HTML documents.

Embedding media

This code example uses attributes of the <audio> element:

• controls : Displays the standard HTML5 controls for the audio on the web page.
• autoplay : Makes the audio play automatically.
• loop : Make the audio repeat (loop) automatically.

<audio src="audio-file.mp3" preload="auto" controls></audio>

The preload attribute is used in the audio element for buffering large files. It can take one of 3 values:

• "none" does not buffer the file
• "auto" buffers the media file
• "metadata" buffers only the metadata for the file

Multiple source files can be specified using the <source> element in order to provide video or audio encoded in different formats for different browsers. For instance:

<video controls>
<source src="SampleVideo.mp4" type="video/mp4">
<source src="SampleVideo.ogv" type="video/ogv">
</video>

You may also specify which codecs the media file requires; this allows the browser to make even more intelligent decisions:

<video controls>
  <source src="SampleVideo.ogv" type="video/ogv; codecs=dirac, speex">
</video>

Controlling media playback

Once you’ve embedded media into your HTML document using the new elements, you can programmatically control them from JavaScript code. For example, to start (or restart) playback, you can do this:

var v = document.getElementsByTagName("video")[0];
v.play();

Controlling an HTML5 audio player to play, pause, increase and decrease volume using some Javascript:

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
  vbutton onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>

Stopping the download of media

While stopping the playback of media is as easy as calling the element’s pause() method, the browser keeps downloading the media.

Here’s a trick that stops the download at once:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.removeAttribute("src");
mediaElement.load();

Seeking through media

You can use the element’s seekable property to determine the ranges of the media that are currently available for seeking to. This returns a TimeRanges object listing the ranges of times that you can seek to:

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0);  // Returns the starting time (in seconds)
mediaElement.seekable.end(0);    // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(0);      // Returns the number of seconds the browser has played

Specifying playback range

When specifying the URI of media for an <audio> or <video> element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark (“#”) followed by the media fragment description.

A time range is specified using the syntax:  #t=[starttime][,endtime]

There are some examples:

http://example.com/video.ogv#t=10,20
Specifies that the video should play the range 10 seconds through 20 seconds.

http://example.com/video.ogv#t=,10.5
Specifies that the video should play from the beginning through 10.5 seconds.

http://example.com/video.ogv#t=,02:00:00
Specifies that the video should play from the beginning through two hours.

http://example.com/video.ogv#t=60
Specifies that the video should start playing at 60 seconds and play through the end of the video.

Fallback options

HTML included between, for example, the opening and closing tags of media elements is processed by browsers that don’t support HTML5 media. You can take advantage of this fact to provide alternative fallback media for those browsers.

Using Flash

You can use Flash to play a Flash format movie if the <video> element isn’t supported:

<video src="video.ogv" controls>
    <object data="flvplayer.swf" type="application/x-shockwave-flash">
      <param value="flvplayer.swf" name="movie"/>
    </object>
</video>