Unless
you have been living on a remote island for the past year or so, you have
probably heard the buzz and hype around HTML5. No, HTML5 will not cure most
illnesses, nor will it end world hunger, but it is poised to reshape the rich
Internet application landscape. With all the hype over the new HTML standard,
it's important to bring the discussion back down to earth. Here are the
important facts 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 every browser would support the plug-in.
- 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 three of every four computers. But if you’re
looking to play media and you don’t want to 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
1. <section>
2. <h1>Using the HTML5 Video tag to play video</h1>
3. <video src="video1.mp4" >
4. </video>
5. </section>
6. <section>
7. <h1>Using the Object tag to play media using the Flash plug-in</h1>
8. <object type="application/x-shockwave-flash"
9. data="player.swf" width="290" height="24">
10. <param name="movie" value="player.swf">
11. </object>
12.</section>
So
what’s the big deal? Both examples are simple and easy to implement. But the
important point here is that because the <video> tag is a standard, 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 particular plug-in installed to
play your media. The standard part is what’s been missing from HTML.
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 MPEG-4 for video.
Even
though HTML5 supports these media formats, however, not every browser supports
every format. Figure 2 shows current browsers and the media formats they
support.
Figure
2 Media Support in Current Browsers
Browser |
Video
Formats |
Audio
Formats |
|
Ogg
Theora |
H.264 |
VP8
(WebM) |
Ogg
Vorbis |
MP3 |
Wav |
Internet
Explorer |
Manual
install |
9.0 |
Manual
install |
No |
Yes |
No |
Mozilla
Firefox |
3.5 |
No |
4.0 |
Yes |
No |
Yes |
Google
Chrome |
3.0 |
No |
6.0 |
Yes |
Yes |
Yes |
Safari |
Manual
install |
3 |
Manual
install |
No |
Yes |
Yes |
Opera |
10.50 |
No |
10.60 |
Yes |
No |
Yes |
Using
the Video Tag
To
play a video in an HTML5 page, just use the <video> tag, as shown here:
1. <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 control’s Boolean switch dictates
whether the default playback controls displays. You can also use two other
Boolean properties—autoplay and loop—when setting up the video tag. Figure 3
lists each property attribute and its value.
Figure
3 Video Tag Properties
Attribute |
Value |
Description |
Audio |
Muted |
Defines
the default state of the audio. Currently, only muted is allowed. |
Autoplay |
Autoplay |
If
present, the video starts playing as soon as it’s ready. |
Controls |
Controls |
Adds
Play, Pause and Volume controls. |
Height |
Pixels |
Sets
the height of the video player. |
Loop |
Loop |
If
present, the video will start over again every time it finishes. |
Poster |
url |
Specifies
the URL of an image representing the video. |
Preload |
Preload |
If
present, the video is loaded at page load and is ready to run. It is ignored
if Autoplay is present. |
Src |
url |
The
URL of the video to play. |
Width |
Pixels |
Sets
the width of the video player. |
The
following code shows a few of the key properties on the video player in a
common scenario that includes setting the height and width, autoplay, loop and
controls properties, which will display the play, pause and volume controls as
well as a fallback error message.
1. <video src="video.mp4" width="320" height="240" autoplay controls loop>
2. Your browser does not support the video tag.
3. </video>
You
can also set the specific MIME typeusing 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:
1. <!-- H.264 Constrained baseline profile video (main and extended video compatible)
2. level 3 and Low-Complexity AAC audio in MP4 container -->
3. <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
4. <!-- H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity
5. AAC audio in MP4 container -->
6. <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
You
can set properties in either HTML or JavaScript. The following code shows how
to set the Boolean controls property in HTML and JavaScript.
<!---->
<video controls>
<video controls="">
<video controls="controls">
// 2 ways to show controls in JavaScript
video.controls = true;
video.setAttribute
('controls',
'controls');
When
you don’t know whether a browser will render the page, you need a fallback
mechanism to play your media. All you do is list the video formats you have
rendered your video in, and the browser plays the first one it supports. You
can also add text as a last resort to let the user know that the browser being
used doesn’t support native HTML5 playback of video. The following code
includes multiple video sources as well as a fallback message indicating no
HTML5 support.
1. <video controls>
2. <source src="video1.mp4" />
3. <source src="video1.ogv" />
4. <source src="video1.webm" />
5. <p>This browser does not support HTML5 video</p>
6. </video>
If
you want to make sure your video plays, you can include the object tag to play
a Flash version as well, like so:
1. <video controls>
2. <source src="video1.mp4" />
3. <source src="video1.ogv" />
4. <source src="video1.webm" />
5. <object data="videoplayer.swf">
6. <param name="flashvars" value="video1.mp4">
7. HTML5 Video and Flash are not supported
8. </object>
9. </video>
You
can also use JavaScript to check if a video format is supported by checking the
canPlayType property, as follows:
1. var video = document.getElementsByTagName('video')[0];
2. if (video.canPlayType)
3. { 4. if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
5. { 6. else
7. {8. fallback(video);
9. }
10. }
If
you want to do something more expressive than the simple fallback text, you can
use the onerror event listener to pass the error to:
1. <video src="video.mp4"
2. onerror="fallback(this)">
3. video not supported
4. </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’re 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. Here is the poster
property in action:
1. <video src="video1.mp4" poster="preview.jpg" </video>
Finally,
by using a bit of JavaScript and basic HTML, you can create a more interactive
video player. Figure 4 shows how to add a video player to a form with
JavaScript and how to respond to user input to the control.
Figure
4 Interacting with Video in JavaScript
1. var video = document.createElement('video');
2. video.src = 'video1.mp4';
3. video.controls = true;
4. document.body.appendChild(video);
5. var video = new Video();
6. video.src = 'video1.mp4';
7. var video = new Video('video1.mp4')
8. <script>
9. var video = document.getElementsByTagName('video')[0];
10. </script>
11. <input type="button" value="Play" onclick="video.play()">
12. <input type="button" value="Pause" onclick="video.pause()">
For
a complete list of events and capabilities for playing video, check out this
section of the spec at http://www.w3.org/TR/html5/video.html#playing-the-media-resource.
Using
the Audio Tag
Using
the audio tag is much like using the video tag: you pass one or more audio
files to the control, and the first one the browser supports is played.
1. <audio src="audio.ogg" controls>
2. Your browser does not support the audio element.
3. </audio>
Figure
5
lists the properties available in the audio tag. The control doesn’t need to
display like a video player, so properties like height, width and poster are
not included.
Figure
5 Audio Tag Properties
Attribute | Value | Description |
Autoplay | autoplay | If
present, the audio starts playing as soon as it’s ready. |
Controls | controls | Controls,
such as a play button, are displayed. |
Loop | loop | If
present, the audio starts playing again (looping) when it reaches the end. |
Preload | preload | If
present, the audio is loaded at page load, and is ready to run. It’s ignored
if autoplay is present. |
Src | url | The
URL of the audio to play. |
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 doesn’t support the audio tag, like this:
1. <audio controls autoplay>
2. <source src="audio1.ogg" type="audio/ogg" />
3. <source src="audio1.mp3" type="audio/mpeg" />
4. Your browser does not support the audio element.
5. </audio>
Summary
HTML5
is the next standard for the Web, and depending on the browsers you’re
targeting, you can start using some of the new tags, such as audio and video,
right now. Be cautious when using HTML5, however, because not every browser
supports the new tags, and even if one does, it might not support every media
format. If you’re 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 Web resources that provide browser support
information as well as all the other information you need to ensure HTML5 media
success: