HTML5 and CSS3, Second Edition

Explore the Media Content JavaScript API

In this chapter we’ve briefly touched on the JavaScript APIs for the audio and video

elements. The full API can detect the types of audio files the browser can play, and

it provides methods to control the playback of the audio elements.

In Tip 20, Working with Audio, on page 137, we built a page with multiple sound

samples. We could use the JavaScript API to make all the sounds play at (roughly)

the same time. Here’s a really simplified approach:

html5_audio/javascripts/audio.js

varelement= $("<p><inputtype='button'value='Playall'/></p>")

element.click(function(){

$("audio").each(function(){

this.play();

})

});

$("body").append(element);

We add a Play All button that, when pressed, cycles through all the audio elements

on the page and calls the play() method on each element.

We can do similar things with videos. There are methods to start and pause elements,

query the current time, and integrate with the data inside caption or subtitle tracks.

Be sure to look at the possibilities outlined in the specification to see what’s possible.a

a. http://www.w3.org/TR/html5/embedded-content-0.html#media-elements

support enables us to make video available to devices such as iPhones, but

it also provides an open, standard method of interacting with audio and video

using JavaScript. Most importantly, we’ll be able to treat video and audio

clips just like we treat images by marking them up semantically and making

them easier to identify.

Web VTT is another area to watch closely. You can use Web VTT for more

than just captioning. It supports subtitles for multiple languages, chapters

to make navigation easier, and additional metadata about the video. You can

even use HTML and JSON and interact with the video using JavaScript,

making events fire when cue points are entered and exited. This would be a

great way to build interactive computer-based training that incorporates

video. Unfortunately, at the time of writing not every browser has incorporated

all of the APIs, and by the time they do the specification may have changed.

But it’s certainly something to think about.

report erratum • discuss

The Future • 149

Download from Wow! eBook <www.wowebook.com>