Fun and games and audio and video with HTML5

Categories:

HTML

Tags:

audio, embed, flash, html5, object, video, youtube

Published:

10:35am on Tuesday 6th January, 2009

If you’re the sort of person that enjoys poking around in other people’s code, you’ll have already noticed that this site is built with HTML5, the latest and greatest and very much still in-progress flavour of HTML. As Jeremy noted the other day, that decision has placed me in pretty lofty company this week, with UX London and An Event Apart both launching in the last few days and boasting the same stripped down doctype.

Choosing HTML5 was an easy decision

There have been a fair few articles written on the impending ascendancy of HTML5 as the de-facto standard for the web over the next few years. Back when I was curating Digital Web, we published an article comparing XHTML2 and HTML5 - the author, David Andersson, confidently declared that ”HTML5 will be the future of the web”, and given the evidence it was difficult to disagree with him. A List Apart also published a preview of HTML5, and in September last year Ian Hickson gave a fantastic demo of HTML5 features at Google.

So, there seemed little reason not to make the move to HTML5, not least because as far as I could tell one could do so by simply starting to use a much easier-to-remember doctype - everything else was icing, and I could introduce actual HTML5 features as and when they were supported by browsers. My freelance portfolio also uses HTML5, but is otherwise indistinguishable from HTML5 - but for this site, I decided to kick the tyres on some of the new elements that are available.

Poetry ... makes familiar <object>s be as if they were not familiar.

Two of the new HTML5 elements discussed in the ALA article were the <audio> and <video> tags.

Until now, if you wanted to place audio or video in a web page, you had to use a combination of the <embed> tag (for Firefox) and the <object> tag (for Internet Explorer), together with some gobbledygook attributes to make sure the browser knew what you were trying to achieve.

HTML5, on the other hand, defines two straightforward, easy to comprehend tags, and I was drawn to the fact that one could place markup inside them which would be rendered if the browser did not recognise the new element. They have built-in graceful degradation! Here is the markup for the “standout tracks” on my recent top 10 albums post:

<div class=“audio”>
<h3>Standout track: Troublemaker</h3>
<audio src=”/audio/Troublemaker.mp3” controls>
<object type=“application/x-shockwave-flash” »
data=”/audio/player.swf” id=“audioplayer3” »
height=“24” width=“290”>
<param name=“movie” value=”/audio/Troublemaker.mp3”>
<param name=“FlashVars” value=“playerID=3& »
soundFile=/audio/Troublemaker.mp3”>
<param name=“quality” value=“high”>
<param name=“menu” value=“false”>
<param name=“wmode” value=“transparent”>
<a href=”/audio/Troublemaker.mp3”>Download song (MP3)</a>
</object>
</audio>
</div>

By placing a valid <object> Flash player inside the <audio> tag, and a simple link to download the MP3 file inside that, the track will still be available to visitors using browsers that don’t support the new element, and browsers that don’t have Flash installed. And it’s all perfectly valid HTML5!

(I’m using the 1 Pixel Out Audio Player Wordpress plugin and the instructions for non-WP blogs by Mindy McAdams - I chose this one because I liked the way it looked and worked on the Rissington Podcast.)

The end result will differ depending on your browser of choice. Opera and Safari 3.1 will use their native audio players, while Firefox, IE, and most other browsers will display the Flash player interface. Non-Flash browsers will display a simple HTML link to download the MP3 file.

This may or may not be the wrong way to embed video

As well as music clips, I wanted to embed YouTube clips that I had bookmarked via my Tumblr feed. The HTML5 <video> element is as simple to use as <audio>, albeit with a few extra optional attributes. However, I ran into one major problem - YouTube links are not in a supported video format; they are SWF files (in actual fact wrappers for other SWF files), so even in supported browsers the <video> elements wouldn’t work.

I had a choice to make. Either I could place the object/embed combo directly in the page, or I could wrap it in a <video> element anyway in the name of forward-planning, and use JavaScript to replace the unsupported video with a regular Flash player. Initially I chose the latter path, but on further consideration I have now ditched the <video> element. Perhaps in the future they will support SWF (I don’t pretend to understand all the conversations about codecs and such) and they will make a return, but for now it seemed illogical to use an element whose only purpose was to be immediately overwritten.

When all browsers support all formats, markup will be so much easier

Until that time, I believe my <audio> setup offers the best combination of technologies; native where possible, enhanced Flash player if available, and plain HTML downloads for all.