How to Use HTML5 Video and Audio Tags

April 19th, 2013 Leave a comment
Like the article?
HTML5 Video and Audio Tags

HTML5 is going to be a huge revolution if the W3C ever gets around to finalizing the specifications. That being said, and as you probably know, there are some aspects of HTML5 that you can use now. Two of these functions that are currently available to web developers are the audio and video tags.

A Bit about HTML5 Audio and Video

Before we get into the actual how-to, it is important to understand a bit about how these tags work now and how they might work in the future. The problem is that HTML5 isn’t a standard yet, or at least a ratified standard. What that means is that every browser maker can implement things in HTML5′s proposed specs in a different way.

It also means that older browsers cannot utilize the HTML5 tags that web devs are drooling over. The HTML5 video and audio tags are great because you no longer need to have a Flash plug-in working for the audio or video player to show up and work. As we all know, Flash is the devil when it comes to website slowness.

The next problem lies with codecs. There are three main codecs that are vying to be the standard for HTML5. You have Ogg and WebM, both of which are open source, and then you have the big on H.264, which is proprietary like mp3. Almost everyone uses the H.264 codec because it is better (arguably). The Ogg and WebM are Firefox’s and Google’s response to HTML5 (Note: WebM uses Ogg for audio). They think, probably rightly, that if a codec is going to be included in an industry standard it should be an open source solution. They are worried if H.264 is chosen, browser makers and potentially content creators will be sued out of existence for using it.

No matter which codec ends up being used in the final standard it is important now for web developers to know that they need to make sure that their HTML5 tags support all three codecs. Both Google’s Chrome and Mozilla’s Firefox support and recommend WebM and Ogg, while Safari and Internet Explorer use H.264. Chrome will utilize H.264 if no WebM or Ogg file is available, whereas Firefox will fall back to Flash.

How to Use the HTML5 Video Tag

Standard use of the HTML5 video tag goes as such:

 <video width="320"
        height="240"
        poster="the3cast.jpg">
    This content appears if the video tag or the codec is not supported.
    <source src="podcast.mp4" type="video/mp4" />
    <source src="podcast.webm" type="video/webm" />
    <source src="podcast.ogv" type="video/ogg" />
  </video>

If you know HTML then this should be pretty self explanatory. Height and width are limiters on the height and width of the video, the poster is the album artwork that shows up when the video is paused or before play is pressed.

Then there are the source files, which is where the knowledge about H.264 and WebM and Ogg come in. mp4 is H.264′s file extension. You want this one there since it is the most popular and supported on almost all browsers (with Flash). Then WebM and then Ogg. The Browser will look for its preferred file format and display the correct player for that format. It will work from top to bottom, so you probably want H.264 on top.

There are many more options for the HTML5 video tag which we will cover in another post.

How to Use the HTML5 Audio Tag

The standard use of the HTML5 audio tag goes like this:

 <audio
        controls
        autoplay
        autobuffer
        >
    This content appears if the audio tag or the codec is not supported.
    <source src="the3cast.ogg" type="audio/ogg" />
    <source src="the3cast.mp3" type="audio/mpeg" />
 </audio>

The functions for this tag are just as simple as the video tag.

  • “src” sets the source of the audio file. You can use mp3 or AAC, though mp3 is recommended. Ogg also has an audio version.
  • Controls tell the browser to display the play/pause controls.
  • AutoPlay – Will annoy most users, turn it off, which is the default.
  • autobuffer – instructs the browser to load the audio in the background even if the audio is paused.

Make sure to provide the multiple audio sources if you aren’t going to use mp3 as default.

Conclusions

There are many more aspects to the audio and video tags in HTML5 that we will cover in a later tutorial, but these should get you started.

The most important thing is knowing that including multiple sources is important to maintain cross browser functionality. Without it older version of browsers will not be able to see your audio or video sources.

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!

Comment