HTML and CSS Reference
In-Depth Information
pdf_play_button.addEventListener("click", play_pdf, false);
function play_epub() {
epub_audio.play();
}
function play_mobi() {
mobi_audio.play();
}
function play_pdf() {
pdf_audio.play();
}
}
As we've seen in previous examples, event listeners are used to track when each of the
terms' play buttons is clicked, and call the corresponding
play_
format
function. The
one piece of audio-specific code is the
play()
method (highlighted in
bold
above) called
on each of the
<audio>
elements. As you'd expect, this triggers the playback of the audio.
Try
loading the glossary in your browser
to hear the terms spoken aloud in all their
glory. You can also
download the code and audio media from GitHub
.
An HTML5 Video About HTML5 Canvas
Chapter 1
gave an overview of the HTML Canvas and many of its applications, but
wouldn't it have been cool if we had also included a video illustrating the Canvas in
action? Well, now we know how to do that with the
<video>
element.
Example 3-3
shows an HTML5 page that includes a clip from O'Reilly's
Client-side Graphics with
HTML5 Canvases
demoing an Canvas adaptation of the arcade game
Asteroids
.
Example 3-3. Native HTML5 video content
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Video Illustrating HTML5 Canvas</title>
</head>
<body>
<h1>HTML5 Video Illustrating HTML5 Canvas</h1>
<p>Check out this excerpt from <a
href="http://bitly.com/html5canvasvideo"><em>Client-side Graphics
with HTML5 Canvases</em></a> showing the retro arcade game Asteroids implemented
using HTML5 Canvas.</p>
<video id="asteroids_video" width="480" height="270" controls="true">
<source src="video/html5_asteroids.mp4" type="video/mp4"/>
<source src="video/html5_asteroids.ogg" type="video/ogg"/>
<em>(Sorry, <video> element not supported in your
browser/ereader, so you will not be able to watch this video.)</em>
</video>
</body>
</html>