Your bumper guide to working with media in HTML5

Unless you’ve been living on a remote island for the past year or so, you’ve probably heard the buzz and hype around HTML5.  HTML5 will cure most illnesses; it will solve world hunger; and it sounds the death knell for RIA (Rich Internet Applications) technologies like Silverlight, Flash and Flex.  Though that might sound extreme, the hype over this new HTML standard has been overwhelming.  Let’s bring things back down to earth a bit. To scope what’s important, here’s what you need to know about this new HTML specification:

  • HTML5 is the first new version of the specification since 1999—the Web has changed a lot since then.
  • HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
  • HTML5 provides a standard way of playing media—a key benefit  because there was no standard for playing media in a Web page without a browser plug-in, and no guarantee that the plug-in would be supported in every browser.
  • HTML5 is still a work in progress, but most modern browsers have some HTML5 tag support.

When Silverlight 1.0 shipped in 2007, Microsoft touted its video and audio playback as primary features, and a prime reason to see Silverlight as an alternative to Flash—which is supported in one version or another on 95 percent of browsers worldwide.  As of this writing, Silverlight is supported on around 75 percent of browsers worldwide, or about 3 of every 4 computers.  Obviously, that’s not enough if you want to guarantee that your video or audio will play on any computer that happens to hit your Web site. So the end result is, if you are looking to play media and you don’t want the hassle or the dependency of a plug-in, HTML5 is the answer.

To see the difference between using the HTML5 video tag and the traditional object tag to play media, consider the example in Figure 1.

Figure 1 The HTML Video Tag vs.  the Object Tag to Play Media

<section>

<h1>Using the HTML5 Video tag to play video</h1>

<video src="video1.mp4" >

</video>

</section>

 

<section>

<h1>Using the Object tag to play media using the Flash plugin</h1>

<object type="application/x-shockwave-flash"

data="player.swf" width="290" height="24">

<param name="movie" value="player.swf">

</object>

</section>

So what’s the big deal?  Both examples are pretty simple and easy to implement.  But the important point here is that the <video> tag is a standard and thus there will be no question that it should be used to play media.  You don’t have to guess if a browser has a certain version of a certain plug-in installed to play your media.  The standard part is what’s been missing for so long.

Supported Media Formats in HTML5

To use media in your next HTML5 application, you need to know what formats are supported.  HTML5 supports aac, mp3 and ogg vorbis for audio and ogg theora, webm and mpeg4 for video.

However, even though HTML5 supports these media formats, not every browser supports every format.  Figure 2 shows current browsers and the media formats they support.

Figure 2 Media Support in Today’s Browsers   

Using the Video Tag

To play a video in an HTML5 page, just use the <video> tag, as shown here:

<video src="video.mp4" controls />

The src attribute (http://www.w3.org/TR/html5/video.html#the-source-element) sets the name or names of the video to play, and the controls Boolean switch dictates whether the default playback controls will display.  You can also use two other Boolean properties—autoplay and loop—when setting up the video tag. Figure 3 lists the property attributes, their values and description.

Figure 3 Video Tag Properties

The following code shows setting a few of the key properties on the video player in a common scenario that includes setting the height and width, autoplay, loop and the controls property, which will display the play, pause and volume controls as well as a fallback error message.

<video src="video.mp4" width="320" height="240" autoplay controls loop>

Your browser does not support the video tag.

</video>

You can also set the specific MIME type using the type attribute and codec in the source element. These examples use the type attribute to set the MIME type and the encoding of the media:

<!-- H.264 Constrained baseline profile video (main and extended video compatible)

level 3 and Low-Complexity AAC audio in MP4 container -->

<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

 

<!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity

AAC audio in MP4 container -->

<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

You can set properties in various ways, either in HTML or in JavaScript.  The following shows how to set the Boolean controls property in HTML and JavaScript.

<!-- 3 ways to show the controls -->

<video controls>

<video controls="">

<video controls="controls">

 

// 2 ways to show controls in JavaScript

video.controls = true;

video.setAttribute

('controls',

'controls');

What do you do when you don’t know whether a browser will render the page?  You need a fallback mechanism to play your media.  This is actually pretty simple—all you do is list the video formats you’ve rendered your video in, and the browser will play the first one it supports.  You can also add text as a last resort to let the user know that the browser being used does not support native HTML5 playback of video. The following code includes multiple video sources as well as a fallback message indicating no HTML5 support.

<video controls>

<source src="video1.mp4" />

<source src="video1.ogv" />

<source src="video1.webm" />

<p>This browser does not support HTML5 video</p>

</video>

If you really want to make sure your video plays, you can always include the object tag to play a Flash version as well, like so:

<video controls>

<source src="video1.mp4" />

<source src="video1.ogv" />

<source src="video1.webm" />

<object data="videoplayer.swf">

<param name="flashvars" value="video1.mp4">

HTML5 Video and Flash are not supported

</object>

</video>

If you’d like to do something more expressive than the simple fallback text, you can use the onerror event listener to pass the error to:

<video src="video.mp4"

onerror="fallback(this)">

video not supported

</video>

Using the poster property, you can specify the URL of an image to show in place of the video on the form.  Usually you are showing either a list of videos or a single video on a form, so having an easy way to show a preview of the video in the form of an image delivers a better user experience for the user.  Here it is in action.

<audio src="audio.ogg" controls>

Your browser does not support the audio element.

</audio>

Figure 5 lists the properties that are available in the audio tag.Since the control does not need to display like a video player, properties like height, width and poster are not included.

Figure 5 Audio Tag Properties

 

As with the video tag, you can pass multiple files to the audio tag and the first one that is supported will play.You can also use a fallback message when the browser does not support the audio tag, like this:

<audio controls autoplay>

<source src="audio1.ogg" type="audio/ogg" />

<source src="audio1.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio>

Summary

HTML5 is the next standard for the Web, and depending on the browsers you’re targeting, you may be able to start using some of the new tags, like audio and video right now.Be cautious when using HTML5, though, as not every browser supports the new tags, and even if one does, it may not support every media format.If you are using a modern browser that does support HTML5, you still need to do the extra work to process your media in all formats to ensure user success.

Here are some great resources on the Web that can give you browser support information as well as all the other information you need to ensure HTML5 media success:

·         http://www.w3.org/TR/html5/video.html

·         http://dev.w3.org/html5/spec/Overview.html

·         http://w3schools.com/html5/default.asp

·         http://html5test.com/

·         http://caniuse.com/

Related Stories

Leave a comment

Alternatively

This will only be used to quickly provide signup information and will not allow us to post to your account or appear on your timeline.