html5-video

HTML5 Audio and Video

Image: A body painted girl shows her love for HTML5. Source: Wikipedia.

If you’re somebody that plays embedded audio in your webpages – or perhaps you’re a podcaster – it’s likely you endure all sorts of compatibility problems when serving your audio for an array of ever increasing number of browsers and mobile devices. I blame Steve Jobs; if it wasn’t for his decision with regard to flash support in the iPad, iPhone and other devices, we’d all happily carry on using Flash with a blissful ignorance to the ongoing implementation of HTML5 and its native audio support. Having said that, we can thank Jobsy for fast-tracking development of a workable standard.

The post serves as a basic introduction before I post a more advanced (shortcode) solution in a few days.

HTML5 is far more than video and audio but – for my purposes anyhow, and at this stage – it’s more important to me than anything else. Once HTML5 is fully supported and widely used by developers, it’ll provide a far more robust browsing experience. It will see the web come alive with animations, gaming and application type interfaces that aren’t currently possible without third party plugins.

This post provides a very basic introduction to HTML5 audio and video support.

The HTML5 <audio> Tag

The HTML5 audio tag is actually quite simple.

<audio src="song.mp3" controls="controls" </audio>

That’s it. Since the player functionality is integrated into the browser, it means that this code alone will render a compatible player. What does it look like? Generally speaking, it will look like this:

The audio player you see above is rendered by your browser. As such, it’ll look different (assuming it rendered at all) depending on what you use to surf the web. For example, if you’re reading this page using Internet Explorer it likely once looked this this:

If you’re using Chrome, it’ll look something like this:

And if you’re using Safari, you’re probably looking at something like this:

It’s a pain in the backside, isn’t it? Your audio player will have a different look and feel depending on your browser. Personally, I quite like the look of IE’s player with Chrome’s coming a close second. Fortunately, it’s easy to style HTML5 audio (and video) players with CSS. A little more on this later.

If you didn’t see anything at all, it’s likely that your browser doesn’t support MP3 audio. Thankfully, there’s a fix to this. You can define multiple sources that your browser will sort through until it finds one that’s compatible. The code, again, is simple:

I’ve had nothing but trouble with the Ogg Vorbis format but it still seems to be the format of choice. You can provide as many audio sources as you wish but your browser will find and use the first available compatible format and then ignore the others.

There’s always the chance that the browser a visitor is using won’t be able to render any of the audio formats provided (or simply doesn’t support HTML5). For this reason, we can provide a flash fallback. Flash is still very widely supported outside of the iDevices. We do that as follows:

Note the normal object code inside the audio tag? You can reference any flash player of choice. In my case, this was the flash player discussed here. If a HTML5 player is served then the flash embed code is ignored.

Supported Formats by the Major Browsers

The following table shows supported formats by the major browsers at the time of writing.

Format IE 9 F’fox 3.5 Opera 10.5 Chrome 3 Safari 3
Ogg Vorbis No Yes Yes Yes No
MP3 Yes No No Yes Yes
Wav No Yes Yes Yes Yes

Although the wav format is generally best supported, it’s also the most unusable for web related purposes. Unlike the MP3 and OGG format, it’s uncompressed and generally unsuitable for streaming. To cover all the big HTML5 browsers, it’s best to provide both MP3 and OGG audio options.

Ogg vorbis is a “fully open, non-proprietary, patent-and-royalty-free, general-purpose compressed audio format”… so one does have to wonder why Internet Explorer 9 doesn’t support it.

Available <audio> Attributes

 

Attribute Value Description
autoplay autoplay Specifies that the audio will start playing as soon as it is ready.
controls controls Specifies that controls will be displayed, such as a play button.
loop loop Specifies that the audio will start playing again (looping) when it reaches the end
preload preload Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
src url Specifies the URL of the audio to play

Styling Audio Players

One of the best things about HTML5 players is that they can be controlled with JavaScript and styled almost exclusively with CSS. For example, check out my little hacked audio player with nothing more than a play and stop button below:

Because it’s styled with nothing other than CSS, it should display the same in any HTML5 capable browser.

The HTML5 <video> Tag

Not unlike the audio tag, the video tag works natively in supported browsers. It will render a browser-specific player with controls that’ll work on all HTML5 supported devices (such as the iPad and iPhone).

The code to render your browser couldn’t be easier – particularly if you’re used to complicated flash solutions.

<video src="movie.mp4" controls="controls"></video>

More often than not you’ll want to reference the height and width attributes to ensure your video formats nicely on your screen.

<video src="movie.ogg" width="440" height="250" controls="controls"></video>

It’s good practice to leave an insulting message for people that aren’t using an up-to-date browser:

<video src="movie.ogg" width="440" height="250" controls="controls">
Get off the Internet and get a life... and get an up-to-date browser while you're at it.
</video>

Your browser specific video player will look like this:

If you’re one of the large percentage of people that still use IE8, you probably can’t see anything above. Upgrade to IE9 and it’ll render as it is designed to… unless of course you’re using XP. IE9 isn’t available for Windows XP. This leaves millions with no other option but to use a competing browser (or upgrade to Windows 7).

Support for Multiple Video Formats

It’s important to provide a video format that will be compatible with the majority of users. You can define multiple sources that your browser will sort through until it finds a format that it’ll support.

Example:

Once again, a flash fall-back can be defined to play when HTML5 video content can’t be rendered.

All <video> Attributes

Attribute Value Description
audio muted Defining the default state of the the audio. Currently, only “muted” is allowed
autoplay autoplay If present, then the video will start playing as soon as it is ready
controls controls If present, controls will be displayed, such as a play button
height pixels Sets the height of the video player
loop loop If present, the video will start over again, every time it is finished
poster url Specifies the URL of an image representing the video
preload preload If present, the video will be loaded at page load, and ready to run. Ignored if “autoplay” is present
src url The URL of the video to play
width pixels Sets the width of the video player

Video Format Support

Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec
  • MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec

Coming Soon

It makes sense that you’ll provide a player that looks and functions the same regardless of what tool a visitor is using to consume your media. In the next week (or so) I’ll provide some shortcode that’ll render a truly cross-cosmetic and fully customizable audio and video player that looks like this:

References

Shortt URL for this post:

9 comments

    • Marty
      Author

      HTML5 video and audio is a pain. The lack of browser compatibility and video type support is a nuisance. I tend to stick with a flash solution and use HTML5 as a fallback. I have a scheduled post that details how to do that with audio but the same principles could be applied to video. Remember to list multiple sources; I like MPEG4 first, then OGG second.

      I haven’t forgotten about your ‘other’ request. I’ve spent most of the last couple of weeks in LA which has caused havoc to my schedule. Even though it’s probably too late, I’ll post it soon (the issue I ran into was with image scaling – now resolved!).

  1. Nice to hear from you! I spent a whole day to make it work with a fallback (with help from a developer). First I did not realise that my mp4 was corrupt. I use xmedia recode. Tomorrow I will publish an article about the problem here: http://bit.ly/vZ1OoB. Wish you all the best, looking forward to more interesting posts of you.

    • Marty
      Author

      I just checked your link but your post isn’t up yet. I love your blog, by the way. I’m looking forward to reading about your solution. Lucky Google translates your pages for me :)

  2. Today I published a short article about audio with html5, because one of my customers wants to upload an audio file. I remembered your post here. Have you already published sth. about a stylish audio player?

    • Marty
      Author

      Hi Ramona. I’m really sorry about the late reply… I’ve been crazy busy at work and haven’t had time to attend to any of my sites in any major way.

      I did a bunch of styled player that can be inserted into a post via shortcode but haven’t had time to post anything. A link to the players themselves are here. I’ll get to them as soon as I can. I use them myself as fallbacks from the flash player but they’re probably good enough as a primary. Still, dealing with HTML5 audio and video stuff is a pain.

      I’ll check out your post tomorrow. Take care!

  3. Hi,
    Having only a small knowledge of websites and building websites using Google Apps I find your explanation about the HTML5 audio really interesting.

    I run a number of music sites so audio playback is the most important part of the website. I got the url of a none flash audio gadget and inserted it into my webpage. I then inserted the url of an mp3 music file and the thing worked. The audio players appeared as you described in various browsers, but does offer playback across most platforms including mobile (except Opera, which does not seem to support it yet).

    I would be very interested in adding an audio player that looks the same in all browsers. I am also interested in an audio player with a playlist (all none flash so they work across all platforms).

    If they exist, or if you develop them, how would I get the code to insert into my website so that a player with a music file in it appears?

    Regards.

    Sean

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">