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
- autoplay – plays the file as soon as the page opens. Use it only when you have to. And if you do that, please use the controls, or at least have the audio turned down.
- muted – starts the media file with the sound muted. Suggested to start it with muted.
These attributes are specific to video:
- poster (do not use for iOs3.x)
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:
- IE 9+
- Firefox 3.5+
- Safari 4+
- Chrome 3 +
- Opera 10.5+
- iOs 3.2+(video)/4 + (video)
- Android – 2+(video) / 2.3+ (audio)
Also, the Bad — File Formats
Two supported for audio:
- mp3 – safari, chrome, ie9+
- ogg – ff, chrome, opera
And three supported for video:
- mp4 – safari, chrome, ie9+, iOS, Android
- ogg/ogv – ff, chrome, opera (OGG is open technology)
- WebM – ff, chrome, opera, android 2.3+ (owned by google) (quality of the video is better if used with this codec).
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:
- AddType video/ogg.ogv
- AddType video/mp4.mp4
- AddType video/webm.webm
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
- Image with download link
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
- Know your users
- Focus on the purpose of content
- Use the right tool for the job
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.
- praegnanz.de/html5video – prebuilt players chart
- blog.gingertech.net – Silvia Pfeiffer's blog
- Upcoming: HTML5 Cookbook
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:
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:
- Photos: Virginia DeBolt
- Live Tweets: Mark Casias
- Setup & Breakdown: Zerek Welz
- Recap: Samantha Metheny
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:
- Reputation management
- Subject lines
- Open rates
- E-mail analytics
- Bounce management
- List building
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.