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.

About the Author

David Leggett

David (TheLeggett) Leggett is a young entrepreneur who specializes in building successful online businesses. For seven years, David has been designing, developing and managing online projects as a self-employed individual. With strong values, a relentless work ethic, and an undying love for self-education, Mr. Leggett has built a career since the age of 15 with little regard to the conventional workplace.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. While audio and video are supported, there are no codecs that are universally supported (well, audio has wav, which is as close to raw audio as you can get).

    The reason there aren’t many books on HTML5 is because it’s not even close to being final. The only thing you can build with it are tech demos and iPhone-only apps… Nothing that’ll pay the bills.

    Stick with jQuery or other frameworks that’ll be able to serve flash/html5 to users as necessary, depending on what their browser supports, and don’t worry so much about the tech.

    Instead focus on doing things well. Look into MVC frameworks that have started popping up and can enable large-scale applications that might start to compete with flash/flex. They allow a further separation between design/functionality/logic.

    • Good advice Dusty. I do want to point out that while there aren’t any universal codecs available yet, as soon as Internet Explorer 9 is available, <video> will work in all major modern browsers. You can set multiple video sources in the video tag.

  2. Frederick January 18, 2011

    “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.”

    I think that’s a little too optimistic. The problem with a lot of the HTML5/CSS3 stuff is it has to work. You can use terms like “degrades elegantly” all you want but when your client calls you at 2AM because the site is broken on their XP machine running IE6 it doesn’t matter that the rest of the world is using at least IE8…

    • Valid points Frederick. My over optimistic approach surely won’t work for everyone.

      However, I’m ready to start taking projects using these new technologies. If my clients aren’t ready, then they may not be the clients I’m looking to work with. Don’t take that to mean that EVERYONE should take my approach. I’m at a point where I’m ok with this approach to finding work. The people I work with (and my personal projects) are ready to take advantage of all this new stuff.

  3. Great post David.

    I didn’t come here to argue but…

    Frederick – I’m sorry but that’s just the sort of talk that’s going to hold back the web.

    We need to embrace and teach these new technologies.

    There’s too much to gain from them to continue to build sites as though it was 2002.

    Dusty – I agree, we’ve got to be sensible here and let things work for people. Fortunately a lot of clever people are already making stuff to deal with this. Check these out: http://mashable.com/2010/05/18/html5-video-tools/

    Just my thoughts though people :)

    • Nice link James, thanks for sharing :)

      It doesn’t really bother me if some companies/individuals want to keep building sites using current technologies over newer ones. I think you said it well when you mentioned that there is so much to gain using these newer web technologies.

  4. At James and Frederick: the funny thing about both of your points is that you’re both 100% correct. HTML5 will indeed make things easier (if not easier, then perhaps better in some other sense) for web designers, but it’s unlikely it will be as ubiquitous as many seem to hope at the moment. The thing is though, as Frederick touched on, is that there are far more machines in the world running on earlier browsers (because remember–it’s not just the first-world countries we’re talking about here) or less efficient browsers. So if it’s truly User Experience we’re discussing here, I would have to agree with Frederick. Designers can’t just abandon a majority of users because the newest tool is better.

    It just boils down to what’s more important: the designer’s experience with a relatively small audience, or elegant, broad accessibility.

    And those are my thoughts :)

    • @Kristina: The fact that there are more machines in the world running obsolete browsers is really a non-issue, because you don’t (typically) optimize sites for the entire world, you optimize them based on your actual visitors’ browser/OS capabilities and if you’re from a first-world country, you’re typically building sites that are going to be viewed by users of first-world counties.

      Not only that, but there’s no reason not to be utilizing HTML5/CSS3 in sites today. I’m a big proponent of Andy Clarke’s philosophy of design and development that promotes using advanced techniques that users of modern browsers can take advantage of while still designing sites to be accessible to those with obsolete browsers. User experience does not need to be replicated for every possible browser, especially out-dated and obsolete ones. For a large majority of sites, doing so is a waste of a time, energy, and resources. This isn’t to say that this can be done with every site you work on. There are definitely cases when you’ll have to rely on say Javascript instead of CSS3 because a large enough percentage of a particular site’s visitors are using an outdated browser, but there are a lot of times when it’s more appropriate to provide a more feature-full site for users of modern browsers simply because the site’s user base warrants it or your client’s budget doesn’t allow for certain features to be implemented in a cross-browser fashion. To simply write off HTML5/CSS3 due to lack of world-wide support is short-sighted to the say the least and not in the best interests of both clients and users.

  5. we will always have old browser users so this should not stop developers to build sites with latest technologies. Now CSS3 is out as well and again its not supported by old browsers.

  6. Just wow… (not regarding the article – the author bio).

  7. The debate about embracing new features versus supporting old browser has raged for a long time in the world of HTML / CSS. This time, however, we have a better chance of encouraging user change when appropriate.

    Why? Before, with mostly CSS support changes, the value proposition to the user for upgrading their browser was small: “Upgrade your browser and my CSS will be easier to code and look better!” Most people don’t care.

    With these new features, the value prop is: “Want to listen to this audio? Want to view this video? You need to upgrade your browser. Click here.” It’s the SAME value prop (and a similar hurdle) that got everyone to install flash in the first place. And they installed flash.

    Of course there are many other factors such as those who are forced to use a browser by their company, but I wanted to highlight this key difference.

    • While I definitely agree with you that we should be embracing new features for modern browsers, I’m not sure your suggestion would go over well when pitched to a client and there’s really no reason to not support older browsers, just not with all the features one using a modern browser would experience.

      Making primary content inaccessible due to a visitor’s choice of browser is a good way to effectively lose that visitor. So while I agree we shouldn’t be going out of our way to optimize sites and recreate the modern browser’s user experience for outdated browsers, we definitely shouldn’t be making primary content inaccessible as long as the browser they’re using makes up a decent enough portion of the browser market share for a particular site.

      With that said, this is something that needs to be looked at on a case-by-case basis, but what you’re describing sounds more like forcing users to upgrade rather than encouraging.

  8. @David: nice post. looking forward to a series of posts from u summarizing the H5 spec.
    @Frederick: yes, we too have wasted considerable time supporting IE6, but its time we moved on.

  9. @KristinaBjoran (and other coders who are dragging their feet on HTML5 spec)

    I think to argue that “Old browsers won’t support it so we shouldn’t use it” is a terrible, terrible approach to web development. The web is constantly improving, and so should your coding techniques. Knowing how and where you can begin implementing new spec is fundamental to knowing the current limitations of code.

    The concept of progressive enhancement that developers are using with CSS3 can (and should) be applied to HTML5 – including the new multimedia approach it will provide. We should be looking for ways to use new spec whenever possible to enhance user experience while ensuring the basic functions still work on unsupportive browsers.

    If you flip through the spec, it gets layered with plenty of fall-back support for browsers that don’t provide HTML5 compatibility. Start by providing relevant video format(s) – .ogv/.mp4 – and they will be supported across all major browsers. If you feel that there will be a large enough portion of your users on older browsers that don’t support those codecs etc, you can add flash fall-backs so video degrades gracefully right from within the new code. If I’m not mistaken you can even easily add tags within the tags within the tags to let the code degrade even further. As your audience uses older browsers less and less you can drop the support…. then later the support – leaving with you with clean HTML5 video tags.

    I think Loren has a great point too – video/audio is content people will upgrade browsers for. Sites like YouTube and Vimeo already have HTML5 versions up and running – and its only a matter of time before the giants at Google decide HTML5 is the way to go and make YouTube require it.

    If you concerned about the use of HTML5 in general, there are a variety of techniques discussed throughout the web about how to get HTML5 to degrade gracefully all the way down to IE6. Some use snippets of Javascript, others offer alternate XML code, etc. All these techniques are pretty straight-forward – and with just a little practice you’ll find they make your life even easier, and your work even better.

    …and who doesn’t want that?

  10. HTML5 would be fantastic if it happened to be in anyway ubiquitous. However in the UK, which forms my target audience when I am designing website, I am aware that organisations such as the NHS use IE6 still!!! I use the case of the NHS here as it is the largest public employer in Europe, and as such is an interesting benchmark when looking at the sort of technology that huge old school organisations are using. There are vast amounts of people who can’t expereince HTML5 even if they knew what it was – way more than the few who can enjoy its benefits.

    To me it is very hard to justify using HTML5 at the moment as it will just mean more development time on projects to make sure they degrade gracefully. Why go to that expense when only a small fraction of users will see the latest HTML5 gloss? As Frederick says many of us feel that it’s better to keep a client happy and not use HTML5 than to have them ringing us up at ungodly hours demanding why their site won’t work on legacy browsers.

    I’d love to see HTML5 more widely adapted, but at present it isn’t. At my company I’m the man responsible for making sure projects don’t over run, and budgets are not overly inflated, it’s not a realistic option.

    Perhaps I am being too pragmatic, but while HTML5 is quite exciting, it is so far away from being a reality that actively promoting it as you have with sentences like “It’s time to stop waiting. The next generation of web applications has already begun.” doesn’t reflect the industry that I have been working in for close to 15 years now.

  11. Great article David :).

    Developers/designers have to start incorporating these new techniques into their work today. The argument to wait for the majority of the world to move to modern browsers is pointless. Currently, most ‘modern’ browsers don’t fully support css2.1, yet we still use it. There was a massive revolution in the last decade to make stuff and generally figure out the ‘best practices’ for css2. Now that we’re moving into a new standard of css3 and html5, we’re having another revolution.

    developers refusing to learn new techniques and use them in their work will die off. There is no argument. Either you produce content that can take advantage of the latest and greatest tools available, or someone who is will get your job. You can argue and complain how broken the tech is and how its moving so slowly. But thats a blessing, use the time to learn these tools inside and out, make stuff, and make the web yank, drag, and pull the browsers into the future.

  12. Kristina Bjoran: It’s sadly the first world technologies the ones that keeps us designing for IE6, the third world implementations always thrive for the latest available and I’m sure IE6 is not. Take a look at some statistics about browsers usage per country.

    Frederick: With that way of thinking you should be moving on horses and using candles yet. It’s your mission to force that client to move on. There’s a whole world to discover if he just forget the milestone from 10 years ago. If he doesn’t move on, its ok, but don’t restrain yourself just for being supportive with your client.

    Great article and what I have read so far is just good news. Semantically and visually. BTW, using techniques like progressive enhancement will help you get a hold on a wider browser base. And what the heck, if you’ve been coding for IE6,IE7,IE8,FF3.5,CH,Safari,Opera, and have succeded, then adding another challenge will turn yourself in a more capable professional. The point is, do you dare?

  13. Michael Lasell February 1, 2011

    The embedded font in the headline on this page doesn’t even work in my beta IE 9. I think we still have a wait before web developers can start using the latest and greatest.

  14. Great article David. The next step will be getting mobile devices on board with this. In browser media capture really opens the door for camera phone users to upload media quickly, as well as recorded media, videos, etc… Because youtube needs more videos faster :P webkit is on board so far with Android, iPhone, and even the newest Blackberry…but the Win7Phone is dragging in the mud with IEmobile. (no HTML 5 support) booo. However, I do love the device. Once win7phone and Palm/HP jump on the bandwagon, the futrue will be set.

  15. HTML5 changes the richt internet application landscape by pushing the limits of interactivity and richness. With the new features, RIA is getting closer to classic desktop applications. Moreover it allows to implement multi-channel strategies, where HTML5 is also run on the Mobile (e.g. based on web-frameworks such as SenchaTouch). At the moment it is not the right time to roll-out enterprise applications with HTML5. But it might be worth the time to wait for a stabil standard instead of implementing your business in plug-in based RIAs that are EoL (Flex, Silverlight).

  16. can we add video chat in html5 .
    i want create a video chat in html5 but no tag is defined for video chat can any one help me to create video chat .

Related Posts