peachpit press html5 multimedia, develop and design (2012)

ptg6964689
ptg6964689
HTML5
Multimedia
DEVELOP AND DESIGN
Ian Devlin
ptg6964689
HTML5 Multimedia: Develop and Design
Ian Devlin
Peachpit Press
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)
Find us on the Web at: www.peachpit.com
To re po rt er ror s, p le as e s en d a n ot e to : er rat a@ pe ach pi t. co m
Peachpit Press is a division of Pearson Education.
Copyright © 2012 by Ian Devlin
Editor: Rebecca Gulick
Development and Copy Editor: Anne Marie Walker
Te ch n ic al Re v ie we r : Chris Mills
Production Coordinator: Myrna Vladic
Compositor: David Van Ness
Proofreader: Patricia Pane
Indexer: Valerie Haynes-Perry
Cover Design: Aren Howell Straiger
Cover Production: Jaime Brenner
Interior Design: Mimi Heft
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, elec-
tronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the pub-

lisher. For information on getting permission for reprints and excerpts, contact
Notice of Liability
The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has
been taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability to any
person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the
instructions contained in this book or by the computer software and hardware products described init.
Trademarks
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the
designations appear as requested by the owner of the trademark. All other product names and services identi-
fied throughout this book are used in editorial fashion only and for the benefit of such companies with no
intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey
endorsement or other affiliation with this book.
ISBN-13: 978-0-321-79393-5
ISBN-10: 0-321-79393-5
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of America
ptg6964689
Dedicated to the memory of Paul Fallon
Tá daoine a shiúlann inár saolta agus shiúlann amach astu go luath
Tá daoine a fhanann ar feadh tamaill
Agus fágann said rianta a gcos ar ár gcroíthe
Agus casann ár n-anamacha port nua go deo deo
ptg6964689
IV HTML MULTIMEDIA
Writing a book is a time-consuming and difficult process, and one I knew noth-
ing about before embarking on this project. A number of people have helped me
through the book-writing process, and others have helped me through the HTML5
process, whether they know it or not. All deserve my thanks.
To Rebe cca Gu lick fo r g iv ing m e t he o ppo rt unit y to ac tua ll y wri te t hi s boo k

and for clearly explaining to me the steps involved.
To A nn e M ar ie Wa lk er fo r en su ri ng th at my wo rd s a re cl ea r an d u nd er st an da bl e.
To Ch ris M ill s fo r his e dit ing and te chn ical re vi ewi ng s kil ls , a nd provi din g me
with many good suggestions and alterations throughout the text.
To Ri ch C la rk fo r g ivi ng me th e o ppo rt un it y t o c urate fo r H TML 5 Ga ll er y (w ww.
html5gallery.com), which not only increased my interest in and knowledge of
HTML5, but it also led to me writing this book.
To Remy Sha rp for fi rst d raw in g my attent io n to HT ML5 in an a rtic le in .net
magazine back in October 2009.
To you, th e reade r, for decid in g to p urc ha se this boo k wi th the inte nti on of
learning. I hope you find it enjoyable and educational.
ACKNOWLEDGMENTS
ptg6964689
CONTENTS V
Introduction xi
 1 AN INTRODUCTION TO HTML 
What Is HTML5? 4
The Progression of HTML5 4
When Can You Use HTML5? 7
Main HTML5 StructuralElements 8
DOCTYPE and Charset 8
<header> and <footer> 11
<hgroup> 12
<article> and <section> 13
<nav> 17
<aside> 18
<figure> and <figcaption> 19
<script> 21
Wrapping Up 21
 2 HTML MULTIMEDIA ELEMENTS 

History of Web Multimedia 24
Media Players 24
HTML Elements 28
Wel com e, Nati ve Mu lt ime di a! 31
The Audio Element 32
The Video Element 35
The Source Element 38
The Track Element 40
Wrapping Up 43
CONTENTS
ptg6964689
VI HTML MULTIMEDIA
 3 USING AUDIO 
Audio Codecs and File Formats 46
Ogg Vorbis 46
MP3 47
WAV 48
AAC 48
MP4 48
Browser Support for Audio Formats 49
Encoding Your Audio File 50
Legacy Browser Fallback 51
Examples of Using the Audio Element 52
Playing an Audio File 52
Playing an Audio File with Different Sources 54
Playing an Audio File with Different Sources and Legacy Fallback . . 55
Wrapping Up 59
 4 USING VIDEO 
Video Codecs and File Formats 62
Theora Ogg 62

MP4 (H.264) 63
WebM 63
Browser Support for Video Formats 64
Encoding Your Video Files 65
Using the Video Elements 67
Playing a Video File 67
Playing a Video File with Different Sources 69
Playing a Video File with Different Sources and Legacy Fallback 72
Targeting Devices with Different Video Files Using Media Types and
Queries 75
Android and Video 80
Wrapping Up 82
ptg6964689
CONTENTS VII
 5 JAVASCRIPT API AND CUSTOM CONTROLS 
What Is JavaScript? 86
Exploring the API Attributes 87
Harnessing the API Events 93
Using the API Methods 96
Creating a Simple Video Player with Custom Controls 98
Adding Play/Pause and Stop Buttons 99
Adding Volume and Mute Buttons 104
Adding a Progress Bar 107
Adding Fast-Forward and Rewind Buttons 110
Adding a Seek Bar 112
Non-HTML5 Browsers 114
Wrapping Up 115
 6 STYLING MEDIA ELEMENTS WITH CSS 
Simple CSS Styling 118
Advanced Whizzyness with CSS3 122

Opacity 122
Gradient 123
Rounded Corners 126
Shadow 126
Sizing Your Content 128
Web Ki t- sp eci fic C SS 3 Ru le s 135
Reflect 135
Mask 136
Wrapping Up 137
ptg6964689
VIII HTML MULTIMEDIA
 7 TRANSITIONS, TRANSFORMS, AND ANIMATION 
Using Transitions 140
Using Transitions with Audio and Video 143
Styling with CSS Transitions 144
Fading Transitions 146
Exploring 2D Transforms 148
Scaling a Video 148
Rotating a Video 150
Skewing a Video 151
Translating a Video 151
Playing with 3D Transforms 154
Wor ki ng wit h An im at io ns 158
@keyframes 158
Animated Video Cover 161
Animated Spin 167
Extending the Animated Video Cover to 3D 169
Wrapping Up 171
 8 MULTIMEDIA AND ACCESSIBILITY 
Media and Potential Accessibility Issues 174

A Brief Look at SRT 175
Introducing WebVTT 176
What Can WebVTT Do? 176
WebVTT File Format 177
The Track Element 185
Using WebVTT and the Track Element Now 188
Playr Example 189
Media Controls and Accessibility 192
Wrapping Up 195
ptg6964689
CONTENTS IX
 9 USING VIDEO WITH CANVAS 
The Canvas Element 198
The 2D API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Taking a Screen Shot of an HTML5 Video 202
Making a Copy of a Playing Video 206
Playing the Video Copy in Greyscale 208
Wrapping Up 213
 10 USING VIDEO WITH SVG 
A Brief Introduction to SVG 216
Browser Support 217
The svg Element 217
SVG Text 218
SVG Circle 219
SVG Ellipse 220
Using SVG with HTML5 Video 221
Adding a Text Mask to a Video 221
Adding an Ellipse Mask to a Video 226
Animating an SVG Video Mask 228
Moving an SVG Video Mask 230

Applying SVG Filters to HTML5 Video 233
Wrapping Up 237
ptg6964689
X HTML MULTIMEDIA
 11 FUTURE FEATURES 
Audio APIs 240
Audio Data API 240
Web Audio API 245
getUserMedia API 247
PeerConnection API 249
Stream API 250
The MediaStream Object 250
Web So cke t A PI 252
The WebSocket Interface 252
Using WebSockets 254
Wrapping Up 259
Index 260
ptg6964689
INTRODUCTION XI
INTRODUCTION
As a web developer or web designer, or those of you who just maintain your own
website, you know that the web is constantly changing, and the tools and methods
that are used to build websites are in constant development. Like sand dunes in
the Sahara, they shift constantly, but fortunately, usually in a forward direction.
The shift in web technologies has currently arrived at HTML5, the latest ver-
sion of the language used to define and build web pages. With it comes an easier
method of adding multimedia to your web pages.
The goal of this book is to provide you with an introduction to adding audio
and video to your website, and to give you a glimpse of what else you can do with
HTML5 multimedia.

Throughout the book you’ll find in-depth details of the various HTML5 mul-
timedia elements, as well as full code examples on how you can use them to add
audio and video to your website. You’ll also learn about the accompanying JavaScript
API that allows you to create your own media controls.
In addition, you’ll find explanations and examples of how you can style the
HTML5 media elements with CSS, including some of the new features that CSS3
has to offer. You’ll also learn about multimedia and accessibility, and how you can
add subtitles to your website video.
WHO THIS BOOK IS FOR
This book is aimed at those who are starting out with HTML5 and adding HTML5
audio and video to their websites, and those who are already familiar with HTML5
multimedia but want to learn more.
Some basic knowledge of HTML and CSS is assumed, and the later chapters
require at least a rudimentary knowledge of JavaScript. That said, all the examples
on the book’s accompanying website at www.html5multimedia.com are complete.
ptg6964689
XII HTML MULTIMEDIA
SCREEN SHOTS AND BROWSER VERSIONS
During the course of writing this book, some browser vendors released newer
versions of their products. Firefox is now on version 7, Chrome is on version 14,
and Safari has moved to 5.1. The screen shots in the book usually indicate which
browser and version it was taken from at the time the chapter was written. This, of
course, means that some of the screen shots are from older versions of the browser.
But rest assured that they still work just as well in the latest versions, and if they
don’t, it is clearly marked.
THE WEBSITE FOR THIS BOOK
All the code used in the examples in this book is on the accompanying website at
www.html5multimedia.com. You can either download the files in their entirety or
navigate to the various files via the website and see them working online.
CONTACT

If you would like to contact me, you can do so at
BEFORE YOU BEGIN
In the later chapters of this book, some of what you’ll read is experimental due to
specifications that were still in development at the time of this writing and poor
or nonexistent support in browsers. This of course may have changed by the time
you have this book in your hands. The book’s website will indicate improved sup-
port where applicable.
It’s time to begin! Let’s start by taking a quick look at HTML5, what it is, and
where it comes from.
ptg6964689
This page intentionally left blank
ptg6964689
1
AN INTRODUCTION
TO HTML
ptg6964689

HTML5 is a major overhaul of the lan-
guage that nearly all the content on the
Internet is effectively displayed in. Indeed,
HTML5 changes the way you think about the HTML markup
language. As well as introducing new markup elements to the
specification, a host of JavaScript APIs are also included to give
developers a deeper and consistent way to access native func-
tionality across browsers. Designers and those who are “not too
techy” will also benefit. They’ll now be able to carry out complex
tasks and easily add multimedia to a web document that in the
past would have required more technical knowledge.
This chapter provides you with a brief introduction to HTML5
and how it came about. You’ll also take a quick look at some of

the main HTML5 structural elements.
Let’s go forth and learn!
ptg6964689
 CHAPTER  AN INTRODUCTION TO HTML5
WHAT IS HTML?
HTML5 is the latest and greatest version of the core language of the World Wide
We b a nd i s on e o f t he m o st exc it in g d eve lo p me nts to ha ppe n t o t he w eb a nd th e we b
community in a long time. HTML (HyperText Markup Language) is the language that
has been at the heart of all web documents since its conception in the early 1990s.
HTML5’s predecessor is HTML 4.01, and one of the major differences between
HTML 4.01 and HTML5 is the addition of many JavaScript APIs (Application Pro-
gramming Interfaces) to the specification. Of course, one of these specifications is
directly relevant to the subject of this book—the API that allows interactions with
multimedia elements within the browser. As well as these new APIs, HTML5 also
alters the meaning of some existing HTML elements, removes others, and more
important, adds new ones—some of which allow you to provide more semantic
meaning to your content.
It’s worthwhile noting that most of these new elements don’t actually add any
new functionality that you’ve not seen before.
But before you dive into the workings of HTML5, let’s first look at where HTML5
came from and how it evolved.
THE PROGRESSION OF HTML
It’s fairly common knowledge that Tim Berners-Lee is the father of HTML and
what everyone recognises as the web today.
There is no need to go into a long and detailed history of HTML’s growth from
the initial version in 1990 to the version that most of you will have been brought
up on, HTML 4.01. But it is worthwhile looking at how HTML5 came into fruition
and then evolved.
In 1998, the members of the World Wide Web Consortium (W3C; www.w3.org)
decided that it wouldn’t be worth their while to extend the HTML specification

beyond HTML 4.01. They decided that the future of the web lay with XML (eXten-
sible Markup Language) due to its stricter syntax, which also made the processing
of XML web documents much easier.
Laying HTML 4.01 to rest, they began working on a new specification for
XHTML1.0, which basically was a reformulation of HTML 4.01 as an XML vocabu-
lary that contained several strict syntax rules. Personally, I was quite a fan of this,
because I liked the uniformity of it all, but not everyone was convinced. So, two
ptg6964689
WHAT IS HTML5? 
flavours of XHTML were created: XHTML Transitional to help convert the non-
believers and XHTML Strict, which was for the true believers and what (the W3C
hoped) the nonbelievers would eventually strive to follow.
The situation remained like this for a number of years, with the nonbelievers
either reverting back to HTML 4.01 or remaining satisfied with XHTML Transitional.
As the W3C’s dream of a stricter XHTML world began to dissipate, its members
soldiered on and began working on the specification for XHTML 2.0.
This seemed a bit of an odd decision, because XHTML wasn’t as widely sup-
ported as the W3C hoped. Internet Explorer (IE), one of the most widespread
browsers at the time (it still is, just less so), didn’t even support XHTML. In fact,
declaring a web document as XHTML would only cause IE to attempt to download
the page and not even render it! In addition, forging ahead with a new specification
in XHTML 2.0 didn’t reflect what web developers in the real world were actually
doing at the time. Also, it wasn’t backwards compatible, which, as you will learn
later, is another of HTML5’s strengths.
HTML AND BACKWARDS COMPATIBILITY
One of the rst HTML documents ever written, “Links and Anchors,”
(www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html) is
almost valid HTML5!
In February 2004, a separate group—which included people from Opera,
Mozilla, and later, Apple—called the WHATWG (Web Hypertext Application Tech-

nology Group; www.whatwg.org) released a draft of a new specification—Web
Forms 2.0—that aimed to extend HTML forms. This specification had no standing
with the W3C, and in fact the specification states:
“This document currently has no official standing within the W3C at all. It
is the result of loose collaboration between interested parties over dinner,
in various mailing lists, on IRC, and in private e-mail.”
The state of affairs continued this way with the W3C pursuing XHTML 2.0 and
the WHATWG taking its own path, which included beginning work on another
specification, Web Applications 1.0. As it turns out, Web Applications 1.0 was the
precursor to what is now known as HTML5.
ptg6964689
 CHAPTER  AN INTRODUCTION TO HTML5
The situation took a turn for the better in 2006 when the W3C had a change
of heart with regards to XHTML and decided to no longer pursue it. In 2007, the
Fifth W3C HTML Working Group was chartered, and the W3C also announced that
it would allow the charter for the XHTML 2 Working Group to expire at the end
of 2009. Using the WHATWG’s Web Applications specification as a base, both the
W3C and the WHATWG began developing a new HTML specification, although
somewhat bizarrely, it wasn’t a collaborative process.
As a result, there are actually two different versions of the specification, although
the editor of both is Ian Hickson of Google. Fortunately, there aren’t many dif-
ferences between the two; the main difference is how they are maintained. The
WHATWG specification is a “continuously maintained living standard”; it is main-
tained on a section-by-section granular scale. The W3C specification on the other
hand follows the more traditional style of staged releases. Content-wise they’re
largely the same, although one of the main differences (at time of this writing) is
that the WHATWG version includes the WebVTT file format and some text-track
API features (which are discussed in Chapter 8) that the W3C version does not.
Currently, both the W3C and WHATWG versions of the HTML5 specification
are in a stage called “Last Call,” which means internal and external communities

to the W3C are invited to confirm the technical soundness of the specification.
HTML SPECIFICATIONS
Two dierent versions of the HTML5 specication are available at this time, but there are a few other
versions that are also worth taking a look at:
᭿W3C HTML5 Specication. The latest published version is at www.w3.org/TR/html5. This version is what
is closest to being nal.
᭿WHATWG HTML5 Specication. The latest living standard is at www.whatwg.org/specs/web-apps/
current-work/multipage. Generally, newer additions get added to this specication rst, before nally
making it to the W3C specication.
᭿WHATWG HTML5 Specication—Edition for Web Developers. The web developer edition is at http://
developers.whatwg.org. This is a nice, easy-to-look at version of the WHATWG specication that is
usually kept in sync with the living standard but can be out of date.
ptg6964689
WHAT IS HTML5? 
WHEN CAN YOU USE HTML?
Actually, you can use HTML5 now. Many existing websites are written in HTML5,
of which you are probably already aware. Although the current target date for the
HTML5 specification to reach recommendation status is 2014, this does not mean
you cannot use it.
At the time of this writing, all the latest versions of the main browsers support
some, if not most, features of HTML5. Even IE9 finally supports HTML5 markup
and functionality. This should help to remove any misgivings you might have with
regards to browser compatibility.
You s h o ul d n ’ t b e w o r r i e d th a t t h e H TM L 5 s p e ci fi cat i o n w o n ’ t r e a c h r e c o m m e n -
dation status for another few years. To put this into perspective, the specification
for CSS2.1 only reached recommendation status on the 7th of June, 2011. And CSS3
is all the rage at the moment.
With this in mind, let’s move on and take a look at some of the new structural
elements of HTML5.
ptg6964689

 CHAPTER  AN INTRODUCTION TO HTML5
Any use of the HTML5 multimedia elements and APIs that this book discusses
will naturally require writing HTML markup. You could of course use HTML 4.01
markup (although you do need to use the HTML5 DOCTYPE mentioned in this sec-
tion), but because this book is about HTML5 multimedia, it makes sense for you
to use HTML5 markup. All the examples throughout this book and on the website
use HTML5 markup.
Let’s start by taking a quick look at the main structural elements that can make
up an HTML5 document.
DOCTYPE AND CHARSET
As with any HTML document, you need to begin an HTML5 document with a
DOCTYPE. A DOCTYPE tells the browser what version of HTML the page in question
uses, and the browser in turn uses this to determine how to render the page. The
great thing about the HTML5
DOCTYPE is its simplicity.
With HTML 4.01, you might write this:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“ />But in HTML5, you’d write this:
<!DOCTYPE html>
Ye p . T h a t’ s i t. N ot h i n g m o r e .
This new
DOCTYPE
is the shortest valid string that will cause the browser to
render the document in standards mode, which you want, rather than quirks
mode, which you definitely don’t want (see the sidebar “Standards Mode vs. Quirks
Mode” for more details).
MAIN HTML
STRUCTURALELEMENTS
ptg6964689
MAIN HTML5 STRUCTURALELEMENTS 

STANDARDS MODE VS. QUIRKS MODE
Modern browsers can use two dierent modes to interpret the CSS of a web
document: standards mode and quirks mode.
Standards mode causes the browser to render the CSS according to the speci-
cation, which is correct and the way you would want it.
Quirks mode on the other hand causes the browser to render the CSS accord-
ing to old, nonspecication rules. This mode exists for backwards compatibil-
ity because older browsers didn’t render CSS according to the specications.
These days standards mode is the one you want to use, because in most
cases the oldest browser you will be supporting will be IE6, which doesn’t
need quirks mode to work correctly (although it probably will require some
IE6 specic CSS, but chances are you already know that!).
Interestingly, or annoyingly, IE versions 6 to 8 render a web document as
IE5.5 would when they render a quirks mode page. And you denitely don’t
want this because the resulting rendered page is unpredictable!
It’s also useful and a good idea to provide the character encoding of the docu-
ment, which is usually
UTF-8
. Specifying this in your markup has also been highly
simplified in HTML5.
In HTML 4.01, the charset would be set via this line:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
In HTML5, you’d use:
<meta charset=”utf-8”>
As with the
DOCTYPE
, this character encoding string contains the minimum
number of characters required to be interpreted by the web browser. In fact, you
could make it two characters shorter by removing the quotes, but my personal
choice is to include them here. Also, I’ve not closed the element, which again I

don’t have to, but I could if I wanted to. HTML5 isn’t that strict.
: Specifying a charset also prevents a
cross-site scripting vulnerability issue in IE7.
ptg6964689
 CHAPTER  AN INTRODUCTION TO HTML5
NAMING THE NEW HTML ELEMENTS
Some of the new elements that came to be
included in the HTML5 specication weren’t just
randomly chosen.
In 2004, the editor of the HTML5 specication,
Google’s Ian Hickson, carried out a data-mining
experiment using the Google index on over 1 billion
web pages to get a better idea of what the web was
actually made of with regards to web document
content. He published a number of analyses, one of
which identies the most popular CSS class names
used for HTML elements. You can read this analysis at

The top 10 CSS class names and their corresponding
HTML5 elements are listed in Table 1.1.
Although Tabl e 1.1 do es n’t cover all of t he ne w
HTML5 elements that have been added, it does
show you that there was some thought behind
the naming of the new HTML5 elements and the
semantic content they represent.
TABLE . To p 1 0 M o s t Po p u l a r H TM L C l a ss N a me s a n d T h e i r C or re s p o n d in g H TM L 5 E l e m en ts
RANK NAME HTML ELEMENT
1
footer <footer>
2

menu <menu>
3
title <header>
4
small <small>
5
text <article>, <section>, <aside>
6
content <article>, <section>, <aside>
7
header <header>
8
nav <nav>
9
copyright
n/a
10
button
n/a
ptg6964689
MAIN HTML5 STRUCTURALELEMENTS 
<HEADER> AND <FOOTER>
Almost every HTML document has a header and footer. The HTML5 specification
recognises this and includes two specific elements that you can use to semanti-
cally identify a header and footer. These elements are not restricted to one per
document, however, and can be used to specify the header and footer areas of a
particular section or article of a document.
The header element usually contains at least one h element:
<header>
<h1>The header element</h1>

<span class=”subtitle”>A quick guide</span>
</header>
The footer element is just as simple to use and requires no explanation:
<footer>
<small>Copyright &copy; 2011</small>
</footer>
The
header
element doesn’t have to appear at the top of the web document, just
as the
footer
element doesn’t have to be placed at the bottom. You can actually
place either wherever you want to. That said, it often makes sense to do so, just so
the source of the document is easier to read.
ptg6964689
 CHAPTER  AN INTRODUCTION TO HTML5
<HGROUP>
If a header contains a number of
h
elements grouped together, they can be con-
tained within an hgroup element like this:
<header>
<hgroup>
<h1>The header element</h1>
<h2>A quick guide</h2>
</hgroup>
<a href=”home.html”>Home</a>
</header>
Note that the hgroup element can only contain h elements and nothing else.
HGROUP CONTROVERSY!

The hgroup element is a bit controversial at the time of this writing, because
it has been removed and reinserted into the HTML5 specication in the last
few months. Eorts are being made to remove it again and possibly replace
it with something more semantic. So by the time you read this, it might be
omitted from the specication, so it’s worth double-checking.