this print for content only—size & color not accurate 7.5 x 9.25 spine = 0.75" 336 page count 444PPI Pfeiffer THE EXPERT’S VOICE ® IN WEB DEVELOPMENT The Definitive Guide to HTML5 Video CYAN MAGENTA YELLOW BLACK PANTONE 123 C Silvia Pfeiffer Companion eBook Available Everything you need to know about the new HTML5 video element BOOKS FOR PROFESSIONALS BY PROFESSIONALS ® The Definitive Guide to 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 creat- ing 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 con- vert 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 brows- er 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! US $39.99 Shelve in Web Development / HTML5 User level: Beginner–Advanced THE APRESS ROADMAP Foundation HTML5 Canvas Programming The Essential Guide to HTML5 Pro HTML5 Beginning HTML5 and CSS3 The Definitive Guide to HTML5 Video www.apress.com SOURCE CODE ONLINE Companion eBook See last page for details on $10 eBook version ISBN 978-1-4302-3090-8 9781430230908 53 999 Silvia Pfeiffer HTML5 Video The Definitive Guide to www.it-ebooks.info Download from www.eBookTM.Com www.it-ebooks.info i The Definitive Guide to HTML5 Video ■ ■ ■ Silvia Pfeiffer www.it-ebooks.info ii 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. www.it-ebooks.info iii 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 www.it-ebooks.info iv 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 www.it-ebooks.info v 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 www.it-ebooks.info ■ CONTENTS vi *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 www.it-ebooks.info ■ CONTENTS vii 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 <video> 136 5.2 Basic Shapes and <video> 137 5.3 SVG Text and <video> 141 5.4 SVG Styling for <video> 143 5.5 SVG Effects for <video> 147 5.6 SVG Animations and <video> 154 5.7 Media in SVG 156 5.8. Summary 163 ■Chapter 6: HTML5 Media and Canvas 165 6.1 Video in Canvas 166 6.2 Styling 176 6.3 Compositing 185 6.4 Drawing Text 190 6.5 Transformations 192 6.6 Animations and Interactivity 198 6.7 Summary 200 ■Chapter 7: HTML5 Media and Web Workers 203 7.1 Using Web Workers on Video 204 7.2 Motion Detection with Web Workers 208 7.3 Region Segmentation 212 7.4 Face Detection 217 www.it-ebooks.info ■ CONTENTS viii 7.5 Summary 222 ■Chapter 8: HTML5 Audio API 223 8.1 Reading Audio Data 224 8.1.1 Extracting Audio Samples 224 8.1.2 Information about the Framebuffer 226 8.1.3 Rendering an Audio Waveform 227 8.1.4 Rendering an audio spectrum 230 8.2 Generating Audio Data 232 8.2.1 Creating a Single-Frequency Sound 232 8.2.2 Creating Sound from Another Audio Source 233 8.2.3 Continuous Playback 234 8.2.4 Manipulating Sound: the Bleep 236 8.2.5 A Tone Generator 237 8.3 Overview of the Filter Graph API 239 8.3.1 Basic Reading and Writing 239 8.3.2 Advanced Filters 240 8.3.3 Creating a Reverberation Effect 241 8.3.4 Waveform Display 243 8.4 Summary 245 ■Chapter 9: Media Accessibility and Internationalization 247 9.1 Alternative Content Technologies 248 9.1.1 Vision-impaired Users 248 9.1.2 Hard-of-hearing Users 250 9.1.3 Deaf-blind users 253 9.1.4 Learning Support 254 9.1.5 Foreign Users 254 9.1.6 Technology Summary 255 9.2 Transcriptions 255 9.2.1 Plain Transcripts 255 9.2.2 Interactive Transcripts 256 www.it-ebooks.info [...]... URL) to a video resource The video resource is the file that contains the video data and is stored on a server To create a proper HTML5 document, we package the element into HTML5 boilerplate code: Listing 2–5 A HTML5 document with an MPEG-4 video Guide to HTML5 video: chapter 2: example Chapter 2: example You will choose “auto” to encourage the browser to actually start downloading the entire resource, i.e to do a progressive download even if the video resource is not set to @autoplay The particular... 1.1 A Bit of History While it seems to have taken an eternity for all the individuals involved in HTML and multimedia to achieve the current state of the specifications and the implementations in the web browsers, to the person on the street, it has been a rather surprising and fast innovation From the first mention of the possibility of a element in HTML5 in about 2005, to the first trial... with the element in HTML5 The @poster attribute of the element provides a link to an image resource that the browser can show while no video data is available It is displayed as the video loads into the browser The poster in use here is shown in Figure 2–5 Figure 2–5 The poster image in use in the following examples Listing 2–8 shows how it is used in a video element Listing 2–8 Ogg video. .. scaled by the video' s aspect ratio (i.e the ratio between width and height) In the example screenshots in Figure 2–3, the browsers display the videos in their native dimensions, i.e the dimensions in which the video resource is encoded The dimensions are calculated from the first picture of the video resource, which in the example cases are 960px by 540px In the example screenshots in Figure 2–2, the browsers... poster image so they used the dimensions of the poster image for initial display, which in these cases was 960px by 546px, i.e 6px higher than the video As the videos start playing back, the video viewport is scaled down to the video dimensions as retrieved from the first picture of the video resource If no poster image dimensions and video image dimensions are available — e.g because of video load errors... src=”HelloWorld.webm”>< /video> Listing 2–3 Embedding MPEG-4 video in HTML5 < /video> We've put all three Listings together on a single web page, added controls (that’s the transport bar at the bottom; we’ll get to this later) and fixed the width to 300px to make a straight comparison between all the five major browsers Figure 2–1 shows the results Figure 2–1 The element in . 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. Pfeiffer HTML5 Video The Definitive Guide to www.it-ebooks.info Download from www.eBookTM.Com www.it-ebooks.info i The Definitive Guide to HTML5 Video