The Definitive Guide To HTML5 Video
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 337
CYAN
MAGENTA
YELLOW
BLACK
PANTONE 123 C
BOOKS FOR PROFESSIONALS BY PROFESSIONALS ®
Silvia Pfeiffer
THE APRESS ROADMAP
Beginning
HTML5 and CSS3
Companion eBook
Foundation
HTML5 Canvas
Programming
The Definitive Guide to
HTML5 Video
Pro HTML5
The Essential Guide to
HTML5
See last page for details
on $10 eBook version
www.apress.com
ISBN 978-1-4302-3090-8
53 999
US $39.99
Pfeiffer
SOURCE CODE ONLINE
HTML5 Video
HTML5 provides many new features for web development, and one of the most
important of these is the video element. The Definitive Guide to HTML5 Video
guides you through the maze of standards and codecs, and shows you the truth
of what you can and can’t do with HTML5 video.
Starting with the basics of the video and audio elements, you’ll learn how
to integrate video in all the major browsers, and which file types you’ll require
to ensure the widest reach. You’ll move on to advanced features, such as creating your own video controls, and using the JavaScript API for media elements.
You’ll also see how video works with new web technologies, such as CSS, SVG,
Canvas, and Web Workers. These will enable you to add effects, or to run video
processing tasks as a separate thread without disrupting playback. Finally,
you’ll learn how to make audio and video accessible. If you have assets to convert or you need to create new audio and video that is compatible with HTML5,
the book also covers the tools available for that.
HTML5 is in its infancy and there are still aspects in development. This book
lets you know which parts are production-ready now, and which are changing
as browsers implement them. You’ll see how you can ensure the highest browser compatibility of video features, and how you can future-proof your code
while being prepared for change.
The most important thing to remember, though, is that native video in
HTML is finally here. Enjoy your journey into the bright new world!
Companion
eBook
Available
The Definitive
Guide to
The Definitive Guide to HTML5 Video
THE EXPERT’S VOICE ® IN WEB DEVELOPMENT
The Definitive Guide to
HTML5
Video
Everything you need to know about the
new HTML5 video element
Silvia Pfeiffer
Shelve in
Web Development / HTML5
User level:
Beginner–Advanced
9 781430 230908
http://freepdf-books.com
this print for content only—size & color not accurate
7.5 x 9.25 spine = 0.75" 336 page count 444PPI
http://freepdf-books.com
The Definitive Guide to
HTML5 Video
■■■
Silvia Pfeiffer
i
http://freepdf-books.com
www.itbooksh
ub.com
|||||||||||||||||||||||||
|||||||||||||||||
www.cncmanu
al.com
The Definitive Guide to HTML5 Video
Copyright © 2010 by Silvia Pfeiffer
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any
means, electronic or mechanical, including photocopying, recording, or by any information
storage or retrieval system, without the prior written permission of the copyright owner and the
publisher.
ISBN-13 (pbk): 978-1-4302-3090-8
ISBN-13 (electronic): 978-1-4302-3091-2
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and
images only in an editorial fashion and to the benefit of the trademark owner, with no intention of
infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if
they are not identified as such, is not to be taken as an expression of opinion as to whether or not
they are subject to proprietary rights.
President and Publisher: Paul Manning
Lead Editor: Frank Pohlmann
Technical Reviewer: Chris Pearce
Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan
Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Duncan Parkes, Jeffrey
Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt
Wade, Tom Welsh
Coordinating Editor: Adam Heath
Copy Editor: Mark Watanabe
Compositor: MacPS, LLC
Indexer: Becky Hornyak
Artist: April Milne
Cover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233 Spring
Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail
orders-ny@springer-sbm.com, or visit www.springeronline.com.
For information on translations, please e-mail rights@apress.com, or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional
use. eBook versions and licenses are also available for most titles. For more information, reference
our Special Bulk Sales–eBook Licensing web page at www.apress.com/info/bulksales.
The information in this book is distributed on an “as is” basis, without warranty. Although every
precaution has been taken in the preparation of this work, neither the author(s) nor Apress 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 information contained in this work.
The source code for this book is available to readers at www.apress.com.
ii
http://freepdf-books.com
www.itbooksh
ub.com
|||||||||||||||||||||||||
|||||||||||||||||
www.cncmanu
al.com
To Benjamin, who asked me yesterday if he was
allowed to read his mum's book
so he could do all those cool video demos.
And to John, who has made it all possible.
– Silvia
iii
http://freepdf-books.com
www.itbooksh
ub.com
|||||||||||||||||||||||||
|||||||||||||||||
www.cncmanu
al.com
Contents at a Glance
■Contents ................................................................................................................ v
■About the Author ................................................................................................... x
■About the Technical Reviewer.............................................................................. xi
■Acknowledgments............................................................................................... xii
■Preface ............................................................................................................... xiii
■Chapter 1: Introduction ......................................................................................... 1
■Chapter 2: Audio and Video Elements ................................................................... 9
■Chapter 3: CSS3 Styling ...................................................................................... 49
■Chapter 4: JavaScript API ................................................................................... 81
■Chapter 5: HTML5 Media and SVG ..................................................................... 135
■Chapter 6: HTML5 Media and Canvas ................................................................ 165
■Chapter 7: HTML5 Media and Web Workers ...................................................... 203
■Chapter 8: HTML5 Audio API ............................................................................. 223
■Chapter 9: Media Accessibility and Internationalization .................................. 247
■Chapter 10: Audio and Video Devices ............................................................... 283
■Appendix: Summary and Outlook ...................................................................... 297
■Index ................................................................................................................. 303
iv
http://freepdf-books.com
www.itbooksh
ub.com
|||||||||||||||||||||||||
|||||||||||||||||
www.cncmanu
al.com
Contents
■Contents at a Glance ............................................................................................ iv
■About the Author ................................................................................................... x
■About the Technical Reviewer.............................................................................. xi
■Acknowledgments............................................................................................... xii
■Preface ............................................................................................................... xiii
■Chapter 1: Introduction ......................................................................................... 1
1.1 A Bit of History .......................................................................................................... 1
1.2 A Common Format? .................................................................................................. 2
1.3 Summary................................................................................................................... 7
■Chapter 2: Audio and Video Elements ................................................................... 9
2.1 Video and Audio Markup ........................................................................................... 9
2.1.1 The Video Element ........................................................................................................................ 9
2.1.2 The Audio Element ...................................................................................................................... 20
2.1.3 The Source Element .................................................................................................................... 23
2.1.4 Markup Summary ....................................................................................................................... 29
2.2 Encoding Media Resources ..................................................................................... 30
2.2.1 Encoding MPEG-4 H.264 Video ................................................................................................... 30
2.2.2 Encoding Ogg Theora .................................................................................................................. 32
2.2.3 Encoding WebM .......................................................................................................................... 34
2.2.4 Encoding MP3 and Ogg Vorbis .................................................................................................... 35
v
http://freepdf-books.com
www.itbooksh
ub.com
|||||||||||||||||||||||||
|||||||||||||||||
www.cncmanu
al.com
■ CONTENTS
*2.3 Publishing .............................................................................................................. 35
2.4 Default User Interface .................................................................................................................... 41
2.4.3 Controls Summary ...................................................................................................................... 47
2.5 Summary ........................................................................................................................................ 48
■Chapter 3: CSS3 Styling ...................................................................................... 49
3.1 CSS Box Model and Video ....................................................................................... 50
3.2 CSS Positioning and Video ...................................................................................... 52
3.2.1 Inline Box Type ............................................................................................................................ 52
3.2.2 None Box Type ............................................................................................................................ 54
3.2.3 Block Box Type............................................................................................................................ 55
3.2.4 Relative Positioning Mode ........................................................................................................... 55
3.2.5 Float Positioning Mode................................................................................................................ 58
3.2.6 Absolute Positioning Mode.......................................................................................................... 59
3.2.7 Video Scaling and Alignment Within Box .................................................................................... 60
3.3 CSS Basic Properties .............................................................................................. 62
3.3.1 Opacity ........................................................................................................................................ 63
3.3.2 Gradient ...................................................................................................................................... 64
3.3.3 Marquee ...................................................................................................................................... 66
3.4 CSS Transitions and Transforms............................................................................. 68
3.4.1 Transitions .................................................................................................................................. 68
3.4.2 2D Transforms ............................................................................................................................ 70
3.4.3 3D Transforms ............................................................................................................................ 71
3.4.4 Putting a Video Gallery Together ................................................................................................. 74
3.5 CSS Animations....................................................................................................... 76
3.6 Summary ........................................................................................................................................ 78
■Chapter 4: JavaScript API ................................................................................... 81
4.1 Content Attributes ................................................................................................... 82
4.2 IDL Attributes .......................................................................................................... 83
4.2.1 General Features of Media Resources ........................................................................................ 84
4.2.2 Playback-Related Attributes of Media Resources ....................................................................... 97
vi
http://freepdf-books.com
www.itbooksh
ub.com
|||||||||||||||||||||||||
|||||||||||||||||
www.cncmanu
al.com
■ CONTENTS
4.2.3 States of the Media Element ..................................................................................................... 107
4.3 Control Methods in the API ................................................................................... 122
4.4 Events ................................................................................................................... 127
4.5 Custom Controls.................................................................................................... 130
4.5 Summary............................................................................................................... 134
■Chapter 5: HTML5 Media and SVG ..................................................................... 135
5.1 Use of SVG with