Ian Devlin - HTML5 Multimedia: Develop and Design

Develop and Design

Ian Devlin

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 report errors, please send a note to:
Peachpit Press is a division of Pearson Education.
Copyright 2012 by Ian Devlin

Editor: Rebecca Gulick
Development and Copy Editor: Anne Marie Walker
Technical Reviewer: 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, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. 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 identified 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

Dedicated to the memory of Paul Fallon

T daoine a shilann inr saolta agus shilann amach astu go luath

T daoine a fhanann ar feadh tamaill

Agus fgann said rianta a gcos ar r gcrothe

Agus casann r n-anamacha port nua go deo deo

Writing a book is a time-consuming and difficult process, and one I knew nothing 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 Rebecca Gulick for giving me the opportunity to actually write this book and for clearly explaining to me the steps involved.

To Anne Marie Walker for ensuring that my words are clear and understandable.

To Chris Mills for his editing and technical reviewing skills, and providing me with many good suggestions and alterations throughout the text.

To Rich Clark for giving me the opportunity to curate for HTML5 Gallery (www.html5gallery.com), which not only increased my interest in and knowledge of HTML5, but it also led to me writing this book.

To Remy Sharp for first drawing my attention to HTML5 in an article in .net magazine back in October 2009.

To you, the reader, for deciding to purchase this book with the intention of learning. I hope you find it enjoyable and educational.

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 version 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 youll find in-depth details of the various HTML5 multimedia elements, as well as full code examples on how you can use them to add audio and video to your website. Youll also learn about the accompanying JavaScript API that allows you to create your own media controls.

In addition, youll 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. Youll also learn about multimedia and accessibility, and how you can add subtitles to your website video.

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 books accompanying website at www.html5multimedia.com are complete.

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 dont, it is clearly marked.

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.

If you would like to contact me, you can do so at .

In the later chapters of this book, some of what youll 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 books website will indicate improved support where applicable.

Its time to begin! Lets start by taking a quick look at HTML5, what it is, and where it comes from.

HTML5 is a major overhaul of the language 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 functionality across browsers. Designers and those who are not too techy will also benefit. Theyll 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.