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:
<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.
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>
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|
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
|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
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.
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.
<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.
Once again, a flash fall-back can be defined to play when HTML5 video content can’t be rendered.
All <video> Attributes
|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
- 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
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: