Rob Crowther - HTML5 in Action

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact

2014 by Manning Publications Co. All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.

Recognizing the importance of preserving what has been written, it is Mannings policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine.

Manning Publications Co.20 Baldwin RoadPO Box 261Shelter Island, NY 11964

Development editor: Renae GregoireCopyeditor: Tiffany TaylorProofreader: Elizabeth MartinTypesetter: Dennis DalinnikCover designer: Marija Tudor

ISBN: 9781617290497

Printed in the United States of America

1 2 3 4 5 6 7 8 9 10 MAL 19 18 17 16 15 14

8.4.1. Playing video through theelement

Explaining what HTML5 is can be a very daunting task. Ive been doing this since its inception, and Im still amazed by how many myths abound and how much confusion there is on the topic. With HTML5, we rebooted web development. The world of HTML4 and the nonstarter XHTML stranded those who wanted to use the web as a platform for applications. HTML4 was meant for linked documents, and XHTML was far too strict for its own good and lacked real support in browsers.

HTML5 started with a clean slate. We analyzed what was used on the web and added a lot of features we didnt have before, like Canvas for creating visuals on the fly or accessing images and videos on a pixel level, native audio and video without the need for plug-ins, and forms that validate in the browser without our having to write extra JavaScript. We also started muddying the waters by merging HTML and JavaScript functionalitya lot of HTML5 wont do anything without accessing the elements via a JavaScript API. This confuses many people. We moved on from a document-based web, and in that process we needed more technical expertise. And this meant we needed to rethink a few of our best practices, which can annoy people so that they spread nasty rumors about the viability of HTML5 as a choice for professional development.

HTML5 is built on the robustness principle, which means that a browser will make a lot of educated guesses as to what you might have meant when you make a syntax error instead of simply giving up and showing an error. This gives it backward compatibility, and we can show pages developed for a never-to-arrive XHTML world in browsers these days. A large part of the standard is just that: it tells you how to write a browser that renders HTML5 rather than using it as a web developer. Again, this angers some people, and they shout about the verbosity of the standard.

HTML5 is also the new hotness. Much of the advertising talk, shiny demos, and promises of fidelity that matches native apps on phones makes us cynical, battle-hardened web developers think back on Java, Flash, and Silverlight and their promises, and sigh. Theres a lot of buzz about HTML5, and many things that arent part of the standard are simply declared part of it, because it makes a good punch line.

When it comes to extending the language and bringing new features into it, were running wild right now. Every browser maker and web company comes up with great new concepts on almost a weekly level. That can be frustrating for developers who want only to get a job done. Can we rely on the functionality thats currently developed, or will the standard be changed later on? Were pushing browsers further into the OS and allowing them to access hardware directly, which comes with security and robustness issues that need to be fixed by trial and error. Can you take that risk with us when it comes to delivering your product?

These are exciting times, and when you want to be part of the ride, you can help forge the future development environment for all of us. If you dont have the time to follow the discussions on mailing lists, do a lot of browser testing in previews, and propose your own ideas, you can be left quite confused.

And this is where a book like HTML5 in Action comes in. Instead of promising a cornucopia of functionality that will soon be available, you get examples that work right now, based on examples that worked in the past. Instead of getting experimental demos, youll learn how to build production code based on proven ideas, using the features in modern browsers that make it easier for developers and much more enjoyable for end users. All the examples come with a legend telling you which browsers support the features, and youll learn how not to give features to old browsers that will choke on them.

Youll learn how to use HTML5 now, using secure and intelligent solutions like Modernizr and HTML5 Boilerplate, and youll come out at the end understanding how to write things in HTML5 that currently work. This will make you a part of the movement to get HTML5 production-ready for all of us.

Those who live on the bleeding edge of defining the next browser and language features need implementations in the wildright now. Were past the show-and-tell stage, and we need to get to deliver and enhance. And you can become an integral part of this process by following the advice and applying the examples you find here. Go forth and deliver.

C HRISTIAN H EILMANN

PRINCIPAL EVANGELIST HTML5, M OZILLA

Writing a book about all things HTML5 is more difficult than it sounds. Primarily because of browser and specification changes, it seemed that no matter how much we wrote every six months, browsers would adjust an implementation enough to break a few chapters. This pushed progress back and forth, making chapter revisions a constant fear, especially after we had seen so many books released on HTML5 that were outdated months later. After fighting the tides of change, we eventually nailed down solid app techniques that were resistant to change. These apps should continue to work as HTML5 continues past this books release date.

To add to our books track record of chaos, it originally started with just Robert Crowther (who was already writing another book) and Joe Lennon. Robs death-defying stunt while writing the book was that he somehow managed to write another book called Hello! HTML5 and CSS3 (Manning, 2012) at the same time. If that werent enough, he reviewed chapters from his coauthors and provided helpful feedback (still wondering when he finds time to sleep).

Joe Lennon wrote about forms, about file storage, appendices, and an awesome general overview of the HTML5 specification. Greg Wanish (originally our editor) worked with Joe on his sections. The two tackled some of the most difficult and volatile specifications that are still being implemented in most browsers. Ash Blue came on board to tackle HTML5s massive APIs for interactive visual data.