Using HTML5 Video and Audio in Modern Browsers

Previously I showed you some of the cool stuff you can do when you’re working with canvas.  One area I touched on briefly was the video and audio tag and how to manipulate them from the canvas.

Aside from the canvas, the video and audio tags provide the developer with a rich UI without having to install third-party plug-ins like QuickTime, Flash or Silverlight.  This is because these tags are embedded directly into the webpage.

This in turn is a big deal because it can save you plenty of development time. Modern browsers like Chrome, Firefox, IE9 (and newcomer IE10) support a multitude of video and audio formats.

There are two big benefits to using video and audio tags:

  1. Hardware acceleration.  Playing a video in a hardware accelerated browser will use significantly less CPU power than it would in another browser.  If you’re controlling these tags in JavaScript, this rendering can be offloaded to the GPU which helps in the responsiveness of the website.  This is important if you want the playback to be streamlined.
  2. Plug-in free.  You don’t have to worry about users downloading the right plug-in or the complexities in supporting many of them.

 If you’re unfamiliar with HTML5, before diving into this article you might like to read Yes, You Can Use HTML5 Today! and HTML5 and Even Fancier Forms.

Markup for Video

The video tag is awesome because it gives you the power to embed video content straight into the webpage without needing a third-party plug-in.  To begin with, let’s take a look at the video tag and I’ll explain each attribute.

<video width="320"

        src="intro.mp4"

        height="240"

        poster="intro.jpg"

        autoplay

        controls

        loop

        autobuffer

        >

        This content appears if the video tag or the codec is not supported.

</video>

Here’s the breakdown of the attributes:

  • width – sets the width of the video element in pixels.  If the width is omitted, the browser will use the default width of the video, if it’s available.
  • height – sets the height of the video element.  If the height is omitted, the browser will use the default height of the video, if it’s available.
  • src – sets the video file to be played.  For reach, you should supply video formats that are supported by the most popular browsers.
  • poster – sets the image file that will be displayed while the video content is being loaded, or until the user plays the video.  If a poster file is omitted, the browser will show the first frame of the video.
  • autoplay – instructs the browser to automatically play the video when the page is loaded.
  • controls – displays the video controls to control the video playback.  The controls are visible when the user hovers over a video.  It’s also possible to tab through the controls.
  • loop – instructs the browser to loop the media playback.
  • autobuffer – used when autoplay is not used.  The video is downloaded in the background, so when the user does decide to watch the video, it starts immediately.

Let’s use IE9 as an example to represent modern browsers.  They’ll see the video playing:

fig1

If the user is using an old browser, for example IE6, 7 or 8, they’ll see this message.

fig2

The reason earlier versions of IE display this message is simple: they don’t support the video tag.  But what happens if the browser doesn’t support the video you’re trying to play?  To work around this issue you simply add multiple video sources.  The video tag supports child source elements.  Here’s what HTML looks like.

<video width="320"

        height="240"

        poster="intro.jpg"

        autoplay

        controls

        loop>

    This content appears if the video tag or the codec is not supported.

    <source src="intro.mp4" type="video/mp4" />

    <source src="intro.webm" type="video/webm" />

    <source src="intro.ogv" type="video/ogg" />

</video>

By adding multiple sources, the browser will work its way through the list from top to bottom until it finds a video source it can play.  Here’s a breakdown of the attributes.

  • src – sets the video file to be played.  For reach, you should supply video formats that are supported by the most popular browsers.
  • type – tells the browser what kind of container format is used.

It’s important to note the type attribute.  If this is omitted, the browser needs to download a small piece of each file to work out if it’s supported or not.  This is a complete waste of bandwidth and totally unnecessary.

In the code above we’ve removed the src attribute and replaced it with three source child elements.  The main reason for supplying multiple video sources is reach.  Not all browsers support the same codecs, so it’s important to create a video file and encode it with the correct codec that your target browser supports.

In this case, a modern browser would pick the first source and play its associated source file.  Also in the code above, the video will automatically play when the page is loaded.  This might not sit well with some of your users, so it’s a good option to turn this off and allow them to start the video when they want to.  To give them this ability we use JavaScript.

The video element supports play and pause methods, which gives you the ability to programmatically control the video.  The following example does just that.

<script type="text/javascript">

    var vid = function() {

        return {

        play: function() {

            var v = document.getElementById("myVideo");

            v.play();

        },

        pause: function() {

            var v = document.getElementById("myVideo");

            v.pause();

      }

    }

} ();

</script>

<body>

    <h1>Video and legacy browser fallback</h1>

    <video width="320"

            height="240"

            poster="intro.jpg"

            id="myVideo">

        This content appears if the video tag or the codec is not supported.

        <source src="intro.mp4" type="video/mp4" />

        <source src="intro.webm" type="video/webm" />

        <source src="intro.ogv" type="video/ogg" />

    </video>

    <br />

    <button onclick="vid.play();">Play</button>

    <button onclick="vid.pause();">Pause</button>

</body>

Here’s how the webpage will look with the play and pause buttons.

fig3

This is the best option as it gives the user the power to start the video playback when they decide.  You can even turn the volume up or down by using the volume method.  Here’s how to do that.

<script type="text/javascript">

    var vid = function() {

        return {

            increase: function() {

                var v = document.getElementById("myVideo");

                v.volume += 0.2;

            },

            decrease: function() {

                var v = document.getElementById("myVideo");

                v.volume -= 0.2;

            }

        }

    } ();

</script>

<body>

    <h1>Video and legacy browser fallback</h1>

    <video width="320"

            height="240"

            poster="intro.jpg"

            id="myVideo"

            >

        This content appears if the video tag or the codec is not supported.

        <source src="intro.mp4" type="video/mp4" />

        <source src="intro.webm" type="video/webm" />

        <source src="intro.ogv" type="video/ogg" />

    </video>

    <br />

    <button onclick="vid.increase();">Volumne Up</button>

    <button onclick="vid.decrease();">Volumne Down</button>

</body>

A complete list of all the methods and events you can use with the video tag can be found here.

Multiple Video Formats

At the end of the day, you need to have the correct video codec for the browser, otherwise the video won’t play.  It doesn’t get much simpler than that.  The hard thing to get your head around is which format is supported by which browser.  Here are the popular video formats:

Because the HTML 5 specification is unfinished, the video codecs mentioned above may expand or decrease in size.  Early drafts of the specification mandated that browsers should have built-in support for multimedia in two codecs; Ogg Vorbis for audio and Ogg Theora for video.  The result is that the specification makes no reference to what codecs should be supported by the browser.

Google announced they’re open-sourcing a video codec called VP8.  IE9 supports this codec if it’s installed.  If you’d like to install VP8 for IE9, you can download it here.

Markup for Audio

Like the video tag, the audio tag is fantastic because it gives you the power to embed audio content into the webpage without needing a third-party plug-in.  Let’s take a look at the audio tag and I’ll explain each attribute.

<audio src="elvis.mp3"

        preload="auto"

        controls

        autoplay

        loop

        autobuffer

        muted

        crossorigin

        >

    This content appears if the audio tag or the codec is not supported.

</audio>

Here’s the breakdown of the attributes:

  • src – sets the audio file to be played.  For reach, you should supply audio formats that are supported by the most popular browsers
  • preload – none / metadata / auto – where metadata means preload just the metadata and auto leaves the browser to decide whether to preload the whole file
  • controls – displays the video controls to control the video playback.  The controls are visible when the user hovers over a video.  It’s also possible to tab through the controls
  • autoplay – instructs the browser to automatically play the video when the page is loaded
  • loop – instructs the browser to loop the media playback.
  • autobuffer – used when autoplay is not used.  The video is downloaded in the background, so when the user does decide to watch the video, it starts immediately.
  • muted – sets the default audio output.
  • crossorigin – a CORS settings attribute.

If the user is using a modern browser, they’ll hear the audio playing.

fig4

If the user is using an old browser, for example IE6, 7 or 8, they’ll see the following comments.

fig5

If the browser supports the audio tag, but not the audio codec, the user will see the following output.

fig6

To work around these issues you simply add multiple audio sources.  The audio tag supports child source elements.  Here’s what HTML looks like.

<audio preload="auto"

        loop

        autobuffer

        controls

        >

    This content appears if the audio tag or the codec is not supported.

    <source src="elvis.ogg" type="audio/ogg" />

    <source src="elvis.mp3" type="audio/mpeg" />

</audio>

By adding multiple sources, the browser will work its way through the list from top to bottom until it finds an audio source it can play.  Here’s a breakdown of the attributes.

  • src – sets the audio file to be played.  For reach, you should supply audio formats that are supported by the most popular browsers.
  • type – tells the browser what kind of container format is used.

As with the video tag, it’s important to specify the type attribute.  If this is omitted, the browser needs to download a small piece of each file to work out if it’s supported or not.  The audio tag will run from the top source until it finds an audio file it can play.

The audio tag is available through JavaScript, so it’s possible to create some more aesthetic buttons to allow the user to play and pause the audio.  For this example I’m using border-radius that’s available in CSS3 to give me some rounded div tags.  Here’s the code.

<head>
<style type="text/css">

    div

    {

        height: 1.5em;

        width: 5em;

        -moz-border-radius: 15px;

        border-radius: 15px;

        font-family: verdana;

        font-size: 0.8em;

        background-color: #e0e0e0;

        text-align: center;

        text-shadow: 0 -1px 1px #222;

        float: left;

    }

</style>

<script type="text/javascript">

    var aud = function () {

        return {

            play: function () {

                var v = document.getElementById("myAudio");

                v.play();

            },

            pause: function () {

                var v = document.getElementById("myAudio");

                v.pause();

            },

            init: function () {

                var play = document.getElementById("play");

                var pause = document.getElementById("pause");

                play.addEventListener("click", aud.play);

                pause.addEventListener("click", aud.pause);

            }

        }

    } ();

    window.onload = aud.init;

</script>

</head>

<body>

    <h1>

        Audio and legacy browser fallback</h1>

    <audio preload="auto"

        loop

        autobuffer

        id="myAudio">

        This content appears if the audio tag or the codec is not supported.

        <source src="elvis.ogg" type="audio/ogg">

        <source src="elvis.mp3" type="audio/mpeg">

    </audio>

    <div id="play">

        Play

    </div>

    <div id="pause">

        Pause

    </div>

</body>

</html>

And the rounded play and pause buttons can be seen below.

fig7

I’ve shown you only two functions available through JavaScript.  Rest assured there are many more for your to work with through JavaScript.  A full list of them can be found here.

Supported Formats

The audio tag is only as good as the files you supply, so you need to be aware of which codecs are supported.  Here are the popular audio formats:

SitePoint Content Partner

This tutorial has been made possible by the support of Microsoft. In cooperation with Microsoft and independently written by SitePoint, we strive to work together to develop the content that’s most useful and relevant to you.

It’s important to remember that because the HTML5 specification is a work in progress, the audio codecs mentioned above may expand or decrease over time, but it’s a safe bet MP3 will be there when the specification is finally completed.

Further Reading

To learn more about HTML5  video and audio, check out these links:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://skarp.dk Jitendra Vyas

    please also consider and test mobile browsers

  • http://ronbigus.com Ron Bigus

    Ok where is the link to see this in action?

    Sitepoint often does this, put up a tutorial without a demo link to see what it does. (or doesn’t do, as is often the case)

    As an owner of many Sitepoint books, and long time subscriber I find this very annoying. Your policy should be to always include a working example of any code that is shown, because you often omit supporting code needed to make it work.

    • http://www.onsman.com Ricky Onsman

      Ron, our policy is to publish writers’ articles. While we encourage writers to provide demo pages, it’s not compulsory. In this case, the writer will be adding some demos shortly.

  • https://www.facebook.com/profile.php?id=100001121494383 mohamed

    coool!! il like it !! but all the browser need to think about the legibility of navigation!!

  • http://lvdesign.com.fr lvdesign

    You know is great But you must trancrive your source in many many format
    Why don’ t use only one
    .mp4
    for webkit, ipad, iphone and

    so for these browsers who don’t understand this format a Flash solution with skin and mp4 reader ?

    Only one source for all and Swobject degradation

    What do you think about my suggest?

    thanks for revue

    sincerly
    LV

  • http://www.jameswebdevelopment.com Barry Horbal

    I am assuming that the Javascript controls in the video example with multiple codecs is optional? If you don’t add Javascript buttons, will it still provide the controls no matter which code the browser chooses? The way this section was worded was a little confusing to me.

  • cs

    i’m currently using the audio tag successfully with a swf fallback, but here is what i am really interested in…

    i want to build a custom interface to replace the browser’s default player (much the same way you made the play and pause buttons), however i’m looking for the best way to handle fallback in this scenario. if an unsupported browser loads the page, i don’t want to show my fallback swf object and my custom audio interface.

    would you say hiding the custom controls is best done by setting the display property based on Modernizr classes, or is there a better route?

  • http://jbouffard.com Jason B

    Please take a look at http://videojs.com/

  • http://edgarroberto.com EdgarRoberto

    amazing thank you so much for that info

  • Anonymous

    HTML5 Video and Audio: the new blink tag…

  • http://www.topusenglish,www.engtra.net Dr. Ro

    Thank you for your great explanation.

  • Anonymous

    I block HTML5 video and audio. I block flash and silverlight for the same reasons.