HTML5 Audio and Video

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 looks like 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:

<audio controls="controls">
<source src="song.mp3" type="audio/mpeg" />
<source src="song.ogg" type="audio/ogg" />
Your browser is crappy and doesn't support any of the audio I've provided.
</audio>

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:

<audio id="audio_with_controls" controls>
<source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" />
<object class="playerpreview" type="application/x-shockwave-flash" data="player_mp3_mini.swf" width="400" height="20"><param name="movie" value="player_mp3_mini.swf" /><param name="bgcolor" value="#085c68" /><param name="FlashVars" value="mp3=song.mp3" /><embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" height="20" name="movie" align="" type="application/x-shockwave-flash" flashvars="mp3=song.mp3" /></object>
</audio>

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:

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

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 I’ll provide some shortcode that’ll render a truly cross-cosmetic and fully customizable audio and video player that looks like this:

 

References

 

 

First Name:
Your Email Address:
 


If you liked this article, you may also like:

  1. Automatically Convert MP3 links to Audio Players
  2. WordPress Audio Player and Shortcode
  3. Flash MP3 Players and WordPress
  4. JW Player and WordPress Shortcode
  5. Replace YouTube Links in Text with Embed Code (and Retrieve Video Details via the JSON API)
About Marty

is a passionate web developer from Sydney, Australia. He owns about 600 websites and makes a healthy living from working the web. As a day job, he works as a pilot for an international airline. Follow Marty on Twitter or Google+.

Comments

  1. Embeded my first HTML5 video today. But maybe there is a problem with the doctype? Safari and IE cannot play the video.

    • 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!).

  2. 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.

    • 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 :)

  3. 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?

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

  4. Thank you so much! Of course you have much work to do.Business first. The list of players is quite nice! Stay your interested reader ;)

  5. Hi, I plan a relaunch of my website. I would like to use a more stylish audio player with CSS3. Have you got time to present a solution?

Please leave a comment or question!

*