Recap: HTML5 Media Elements

October 2, 2011 Samantha Metheny

For our September 7 event, Jason Nakai discussed working with HTML5 audio and video, while still reaching a broad audience of browsers and users. If you were unable to attend or need a refresher, we've got you covered:


Before HTML5 there was a lot of need for plugins for the media involved. Flash was good for awhile, but developers wanted to do more and more audio and video. They wanted to stop having to using all the plugins (Flash, Sliverlight, Quicktime, RealMedia, and also ( not a plugin) direct download

When you're using plugins you have a hard time controlling your media. There was just too much running around between the plugins.

Building flash players is such a production. Using HTML5 media elements is a lot nicer and cleaner.

The Good — Simple Attributes

These attributes are specific to video:

There are some other attributes, but the specs are still being worked out. Media group attributes, for example, can actually tie multiple instances of media on a single page to a single timeline. Not much support out there yet, but keep an eye out for it because it will be useful.

The Bad — Browser Support

Not all browsers support HTML5, and not all browsers support HTML5 media elements. Current support:

Also, the Bad — File Formats

Two supported for audio:

And three supported for video:

There are different combos of these compatibilities. Once you've chosen your file format, how do you work it all in?

For code samples, please see Jason's slide deck.

The code is really clean and makes sense, but the order is crucial. Mp4 is at the top because the iPad and some of the iOS devices will see something it doesn't support and stop running. So, we use the one that is supported in the code FIRST.

The Bad — MIME types

Add these to your htacess file:

That should take care of it, tells the server what MIME types to associate with each extension.

So, let's merge the good and the bad to get our products out there …

The Good, The Bad, and The Not So Attractive — Fallbacks

The Not So Attractive — Pre-Built Players

Video JS: A lot of these projects are open source, so go in and mess around, or code your own and then compare them.

The Not So Attractive — Compromise

A note about choosing the right tool: Flash still has good possibilities, like Adobe Connect! If you have to do something seriously robust like that, Flash may actually be the right tool.


Rate Our Speaker

If you attended the event and have not yet rated our speaker, please head over to SpeakerRate and let Jason Nakai know you what thought.

Your input and feedback are essential for helping Webuquerque provide the best content possible. Be sure to tell us what you thought!


Video of the presentation is available on Vimeo:

Slide Deck

The slide deck is available on SlideShare:


Photos are available on Flickr:

Thanks to All Our Volunteers!

Webuquerque just wouldn't be the same without helping hands from our community members:

Want to help? Let us know if you'd like to lend a hand. Interested in speaking? Let us know that too!

Stay Tuned for Our Next Event!

For our October 5 event, Chris Kenworthy will discuss what he's learned from sending over 2 million emails each month:

Let Us Know What You Think

As always, we want to know what's on your mind so we can do the best to ensure Webuquerque is all you want it to be. Make sure to let us know if you have any suggestions, comments or complaints.