Using Audio and Video in HTML 5

This is the second post in the new HTML 5 post series. You can find the first post about HTML 5 input form elements and validation here.

In this post I would like to show you how to use audio and video.We all know that audio and video are everywhere on the web nowadays and are part of the web experience in many sites.

This is a new way of adding audio and video (new html elements) with HTML 5 which does not require any plugins.We can have audio and video playing natively in the browser.

Since the media does not require a plug-in, the user's web browser must support the video/audio codec. Not all web browsers support the same video/audio codecs.You should include multiple formats of the media and let the browser decide which format to use.That can be a time-consuming process since we must encode videos in multiple formats.

These new HTML 5 tags for audio and video are supported by the latest versions of Internet Explorer,Firefox,Opera and Safari.

Finally, before I go on showing you a hands on demo on video and audio tags on HTML 5, I would like to mention a few limitations that video support has.At this time there is no provision for streaming video files so the file must be downloaded completely before a user can seek to a place in a video.There is no mechanism for managing digital rights so it is difficult to prevent piracy.

1) Launch Visual Studio 2010, (Web Developer Edition will do) or any other editor of your choice.In Visual Studio 2010 we have Intellisense and support for HTML 5.Create an empty web site. Add an HTML item to your website

Name it audio.htm. I will be demonstrating the audio support in HTML 5 first.Add a new folder to your project, called media. In the media folder add these audio and video items that you can download from here.

The markup for the page is

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sound Samples</title>
  </head>
  
  <body>
    <h1>Audio Samples</h1>

    <article class="audio">
      <header><h2>1st audio</h2></header>
        <audio controls>
            <source src="media/piano.mp3" type="audio/mp3" />
           <!-- <source src="media/piano.ogg" type="audio/ogg" />-->
          
            <p>Your browser does not support HTML 5 audio element</p>
    
        </audio>
    
    </article>
  
    <article class="audio">
      <header><h2>2nd audio</h2></header>

       <audio controls>
            <source src="media/guitar.mp3" type="audio/mp3" />
           <!-- <source src="media/guitar.ogg" type="audio/ogg" />-->

            <p>Your browser does not support HTML 5 audio element</p>
    
    </audio>
    </article>
    
  </body>
</html>

The code is very easy to follow. I am using some new HTML 5 elements like header,article. I also use the audio element (<audio controls) to specify that I need the audio controls to be displayed on the page. I just specify the source of the audio files.In the comment you will see that I have another format of the audio , .ogg,  (which is not present in the media folder). You should provide alternative audio formats in your websites.

Run your page on the browser and listen to the audio samples. If you have IE9 you will see that it works just fine. But if you hit the compatibility button in the address bar, you will see this message

 Your browser does not support HTML 5 audio element

2) Add another HTML item to your site and name it video.htm. The markup follows

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Video Samples</title>
  </head>
  
  <body>
    <h1>Video Samples</h1>

    <article class="video">
      <header><h2>1st video</h2></header>
        <video controls="controls" autoplay="autoplay">
            <source src="media/gizmo.mp4" type="video/mp4" />

<!--            <source src="media/gizmo.ogv" type="video/ogv" />
            <source src="media/gizmo.web" type="video/web"  />-->
     
          
            <p>Your browser does not support HTML 5 video element</p>
    
        </video>
    
    </article>
  

    
  </body>
</html>

 

 

The code is very easy to follow. I am using some new HTML 5 elements like header,article. I also use the audio element (<video controls) to specify that I need the video controls to be displayed on the page. I just specify the source of the video files.In the comment you will see that I have other formats of the video ,.ogv, .web,  (which is not present in the media folder). You should provide alternative video formats in your websites.

Run your page on the browser and listen to the video sample. If you have IE9 you will see that it works just fine. But if you hit the compatibility button in the address bar, you will see this message

 Your browser does not support HTML 5 video element

Run your page on the browser and see the video in your browser.Note that you have all the controls needed to play the videos.

Hope it helps!!!


 

7 Comments

Comments have been disabled for this content.