The Web is Changing: HTML5 and Native Media Support

If you’re a web designer, you’ve almost certainly heard of HTML5 by now. The next big step in the HTML standard, HTML5 has been in the works since 2004, and brings a lot of changes to the web. Today, I’d simply like to acquaint you with some new media features in HTML5 in the hopes that you’ll begin implementing these features into your own design now.

Until just recently, playing video on a website has been anything but simple. Depending on what site you browse, you may need one of several 3rd party extensions or software. Watching a movie trailer on one website may require Quicktime, while watching a video of a cat playing a keyboard on YouTube would require Adobe Flash.

While most of these software packages are pretty common and relatively easy to download, requiring additional software makes video less accessible to more people. While some users can’t be bothered to install a required extension for their browser, some devices won’t support software altogether(ie: Apple doesn’t support Flash on its iPad and iPhone devices.)

Browsers are now evolving to support video content by default, without any 3rd party add-ons. A new <video> tag allows developers to specify multiple file formats that allows different browsers and devices to play video depending on what codecs the browser is capable of playing.

The <video> syntax is very straightforward, and we won’t be going into detail here. If you’d like to learn more, Dev.Opera has a great piece on building a custom HTML5 video player.

Native audio support

Like video, audio is becoming natively supported by the next generation of web browsers. While this may not seem particularly exciting a feature to some of you (I expect many developers to groan at the idea of a new generation of websites that play music in the background), there will certainly be an emergence of new conventions for using audio effectively on the web.

What makes audio & video really exciting are some of the other new features in HTML5…

Media capture via browser

Consider the requirements (for the user and for the web application) to accomplish the following tasks:

• Uploading a profile picture using a webcam
• Sending a voice message to a contact
• Having an audio/video conversation with a contact

All of these tasks seem super normal. Normal as they seem, these tasks all require additional software outside of a browser to make them possible. For taking a photo from a webcam, we need Flash or some webcam capture software. For having conversations over the web, we need an application like Skype or a Flash-powered chatroom.

While talented developers and companies have created solutions across multiple platforms to accomplish these tasks (ie: Skype for desktops and mobile devices), our limits are easy to see.

It won’t be long until next-gen browsers make these tasks possible without additional software. Many details are still being worked out, but it shouldn’t take much time before we are able to give our users the ability to select input devices to stream audio and video, take a profile picture via the web, or have video conversations from a web browser without plugins… from mobile devices.

To get an idea of what will soon be available, you may want to check out the W3C draft on HTML Media Capture. You may also want to check out this outstanding demo Ericsson Labs has shared showing off voice and video streaming using a custom WebKit build. It’s very exciting to see how this might actually work in the very near future.

We can start developing now

The new <video> and <audio> tags work in all modern browsers (and will also work in Internet Explorer 9). Progress on APIs for working with devices like microphones and webcams from browsers is coming along steadily as well. We’re at a point as developers where we really should be working these new standards into our own projects if we’re not already doing so.

Developers that have been waiting for these features: It’s time to stop waiting. The next generation of web applications has already begun.

A lot could be said in regards to why now is the time to start implementing these new features into your development, but I’ll save those arguments for another time. There is one item I’d like to address now, however.

When there are drastic changes on the web, adoption can take years. It’s inevitable that you’ll hear some people say, “I can’t wait for CSS3/HTML5/[Feature] to be supported for everyone.” Despite knowing that “X” Feature is exactly what they need to craft a certain experience, many developers will wait ages before implementing new features because they aren’t 100% compatible with all browsers/devices.

It’s not the late adopters that are praised for their patience. The early adopters are the ones who reap the benefits of creating ingenious new experiences and pave the way for conventions and cross-platform behavior.

Where to start?

Maybe you’ve already familiarized yourself with a lot of the new features and syntax arriving with HTML5. Outstanding. You’re already ahead of the game, and there isn’t a better time to start implementing these features into your work.

However, there’s no reason to be afraid if you’re not familiar with all the new stuff—in fact, even if you’ve never touched HTML before, you’re timing for getting started with HTML5 is impeccable. We’re at a bit of turning point in regards to site structure, and a lot of old conventions are going to be tossed out in the months to come. Please, please, please… start educating yourself now about HTML5 (and CSS3 + Javascript).

There are a lot of really wonderful resources available to help you get started. I’d highly recommend checking out Marcin Wichary’s presentation on HTML5. A List Apart has also published a really nice preview/primer of HTML5 that should help you acquaint yourself with what’s changing in the next iteration of the HTML standard. Finally, our friends at Smashing Magazine have also published a great look at HTML5 and the future of the web.

I wish I had some books to share with all of you today, but sadly, there aren’t many books on HTML5 available yet. The few I have seen, I haven’t had the opportunity to glance through yet. If you’ve had a chance to read a good book on HTML5, please be sure to share with us in the comments below.

To wrap this up, I’d highly recommend at least acquainting yourself with browsing through the W3C Specification on HTML5. They’re super content-heavy, difficult to read, and ultra-specific (as a specification should be), but there is a lot of useful information in the official specification. Learning to browse through the specification will absolutely be useful in the early years of working with HTML5.

Hope you all enjoyed this brief look into some new media abilities coming to the web. Please tell us if you know of any useful resources for getting started with HTML5. We hope to bring some more in-depth pieces on integrating new web standards in the coming weeks.