Friday, March 29, 2024

Web Developer Basics: Multimedia In HTML5

In the last installment of this series, we talked about link relations in HTML5, which let you specify why you’re linking to something–to help the browser begin to display it properly before it’s even retrieved. In this article, we’ll see how support for various multimedia formats in HTML5 will make things much easier for you as a developer…eventually.

See Me, Hear Me

We’ll start with the good news. HTML5 is fairly intelligent about picking the right default for presenting the most optimum audio or video. Couple that with the absolute minimum coding that’s needed to handle multimedia in HTML5 and you have a pretty good situation for developers.

The bad news is that because the people diligently working on the HTML5 specification tried to compromise between open formats and de facto standard formats and so on, support for native codecs in HTML5 is slightly lacking: there isn’t any. It’s up to the browser to support formats, and up to the developer to supply them. What’s emerged from that are a few relatively new standards. So unless you’re a video or audio enthusiast, you may have to learn a few new things (and worse, convert your legacy media!). But when all is said and done, programs do all the hard work anyway, so it’s certainly not a deal-breaker.

<video controls width="640" height="480" src="sample.mp4" poster="sample.jpg">
</video>

That’s all the code you need to display MPEG-4/H.264 video in an HTML5 browser that supports the MPEG-4/H.264 video format, with a few extra goodies even thrown in such as a predefined video size, default video controls, and a still thumbnail. Unfortunately, at this writing, only Apple’s Safari and Google’s Chrome browsers will work natively with this particular format.

Free Me

MPEG-4 format has one other problem which is not technical; it’s not a “free” format. It’s covered by patents and there are licensing fees involved, at least for broadcasters and browser manufacturers. That’s why Mozilla Firefox, Opera, and a few other browsers support Ogg Theora. Google recently announced it was freeing the VP8 video format it had acquired with On2 Technologies, and simultaneously announced broad industry support for the WebM container format using VP8 video and Vorbis audio.

As many developers will remember from the 1990s, the reality of competing standards is that browsers end up implementing them differently, so you have to keep the differences in mind. Luckily, “all it takes” at this point in time for universal support (except for some mobile platforms) is to have all three different formats available for each of your videos to satisfy all the HTML5 browsers and some extra code…plus a fallback scheme for non-HTML5 browsers (which basically means the all-purpose Flash plugin). Love it or hate it, you can’t live without it yet.

<video controls width="640" height="480" poster="sample.jpg">
    <source src="sample.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="sample.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="sample.ogv"  type='video/ogg; codecs="theora, vorbis"'>
    <object width="640" height="480" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
        <param name="movie" value="flowplayer-3.2.1.swf">
        <param name="allowfullscreen" value="true">
        <param name="flashvars" value='config={"clip": {"url": "http://yourdomain.com/videos/sample.mp4", "autoPlay":false, "autoBuffering":true}}'>
    <p>If you can read this, you're using a pre-HTML5 browser without Flash.</p>
    </object>
</video>

This extra MIME type specification certainly isn’t there to pretty up the code, and it’s not strictly necessary, but if you don’t write it in accurately, then the browser is going to have to download each video file format in order until it finds one that it can play. And by that, we mean downloading the entire video file…so in the worst case, that would be a full three times! So it takes a few extra seconds to paste in those types and codecs, but now you know why you should do it.

Now that you’ve seen some of the video markup, the audio will seem simple by comparison. Once more, it’s quite possible to let the HTML5 browser do a lot of the work:

<audio controls src="sample.ogg">
</audio>

And here it is in action:

And again, in the real world, it’s recommended to provide a number of format options for the browser:

<audio controls preload="metadata">
    <source src="sample.mp3">
    <source src="sample.ogg">
    <!-- Flash fallback code or text would go here -->
</audio>

Both the <video> and <audio> can take another important parameter, shown above, called preload (which was formerly implemented as autobuffer with slightly different syntax). The values for preload can be auto (download the media file to the browser in advance), none (do not preload the media), or metadata (just download enough metadata to discover the duration and other information of the media file). So with a little extra care in coding, you can make the user’s experience much better.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured