Audio and Video in HTML5

HTML5 has inbuilt support for both audio and video tags

This following code explains about embedding a video element

<pre><video width="320" height="240" src="http://www.youtube.com/watch?feature=player_embedded&amp;v=dRcIrVHjUSs" controls="controls">
Your browser does not support the <code>video</code> element.
</video>

This sample example plays a video posted by quality point technologies in youtube.

Multiple file sources can be included in a single video tag using the tag <source> . They help us to provide video and audio in different formats in different browser.For eg

<video controls>
  <source src="qualitypointtech.ogg" type="video/ogg">
  <source src="timesheet.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

If the browser supports ogg but does not satisfy the codecs the video will not load. If the type attribute is specified then if the browser does not support the video / audio format then the query is not taken to the server to be processed and the parser will switch to next source code .If type attribute is not specified in the tag then even if the browser does not support that video format that query is taken to the server an error is displayed.

Controlling media playback

Once the code has been included in the HTML element then these elements can be controlled as per our wish but within the allowed protocol using java script .

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

This html element uses the play method to play the video on the web page.

Stopping the download of media

The code is very simple to pause the playing video as we have discussed how to start a video . But even if we pause the video the browser will continue to download the video and this trick can be used to stop the downloading video .

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

Seeking the media

Media can be played , stopped and even can be stopped to download and here is a sample code to seek through the media . This involves just seeking through the media using the time we have set in the html attribute .

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