08 - HTML5 Audio and Video

Introduction

HTML5 has introduced two new elements named <audio> and <video> to play audio files and show video files on your webpages without using Flash. Before HTML5, there was no option to play audio or video files using HTML tags. If you want to play audio or video, you need to use a plugin like Flash.

Both the <audio> and <video> elements work exactly in the same way. You have to specify the location of your audio or video file using the src attribute. You can also add controls using the controls attribute or create custom controls using JavaScript.

<audio>

The <audio> element is used to embed audio file in your webpage. You can specify the location of your audio file using the src attribute and add built-in controls using the controls attribute. Most commonly used audio formats are wav, mp3 and ogg. The built-in controls include play, pause and volume. It is also good to add fallback content between the opening and closing <audio> tags. If the browser of the viewer does not support HTML5 <audio> element, then the fallback content will be displayed to him.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
   <title>Audio Example</title>
  </head>
  <body>
    <audio src="test.wav" controls>
     Your browser does not support the audio element.   
    </audio>
  </body>
</html>

Output:

 

 

 

 

 

 

Like us on Facebook

Wideskills