Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

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!!!


 

Posted: Dec 26 2011, 02:03 AM by nikolaosk | with 7 comment(s) |
Filed under: , , ,

Comments

fashion photography said:

Aw, this was a really nice post. In idea I would like to put in writing like this additionally – taking time and actual effort to make a very good article… but what can I say… I procrastinate alot and by no means seem to get something done.

# January 4, 2012 9:05 AM

oem software online said:

ZabSmz I appreciate you sharing this article.Much thanks again. Much obliged.

# March 31, 2012 1:43 AM

Klicka said:

Thanks a lot for the post.Really looking forward to read more. Fantastic.

# September 6, 2012 1:55 PM

Klicka said:

Very informative article post.Thanks Again. Will read on...

# September 6, 2012 3:43 PM

social bookmark submissions said:

Im thankful for the post.Really looking forward to read more. Great.

# January 16, 2013 12:19 PM

social bookmarking link building said:

I really liked your blog post. Will read on...

# January 17, 2013 4:12 AM

Mahesh said:

Its just simply awesome...!

# January 29, 2013 7:21 AM