HTML5 Media
Shelley Powers
Copyright 2011 Shelley Powers, Kevin Martin
OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (.
Nutshell Handbook, the Nutshell Handbook logo, and the OReilly logo are registered trademarks of OReilly Media, Inc. HTML5 Media , the image of a brown-eared pheasant, and related trade dress are trademarks of OReilly Media, Inc.
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 OReilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.
O'Reilly Media
Preface
Flash is dead.
At least, thats what were told: thanks to the introduction of the HTML5 video
and audio
elements, Flash is now dead.
Of course, we know this statement isnt true: Flash will have its place in web pages for many years to come. However, thanks to the new HTML5 media elements, were no longer totally dependent on Flash in order to embed a playable audio or video file in our web pages.
In years past, to play audio or video resources in a web page we had to use Flash (or some other plug-in) that may, or may not, work correctly with all browsers. Many times wed have to use a combination of object elements, embeds, and links, just to ensure that a video could be played. It wasnt unusual to find the following in web pages:
Though we could get a video or audio resource to play, we couldnt really do anything with it. We certainly couldnt provide custom controls, ensure subtitle support, or use something like SVG or the canvas
element with it.
Beginning with HTML5, though, we now have two elementsaudio
and video
that provide the long overdue functionality weve needed to really take advantage of audio and video in web pages. Best of all, solid support for the media elements basic functionality is already available in all modern browsers and in most mobile environments.
So while Flash isnt dead, it also isnt the only option we have, and having more options is a very good thing.
Note
As I note in , Flash is still essential if you want your video or audio file to play in older browsers.
About this Book
This book is tightly focused on two new HTML5 elements: the audio
and video
elements .
In , I introduce both and discuss issues of embedding the elements in web pages, how to mark up the elements based on quality and type of audio and video file, as well as exploring all the options available by default with both elements.
In , I describe how to customize the appearance of the media elements using CSS, as well as how to create your own applications that control and work with the elements. I also provide an introduction into debugging your HTML5 media applications, as well as how to check out current browser support.
In , I discuss some of the upcoming media functionality, including support for multiple audio and video tracks, and the new media controller that synchronizes several different media elements. Well also explore the track element, the caption and subtitle formats SRT and WebVTT, and how to enable support for both now using JavaScript libraries.
In , I explore some of the more advanced and esoteric uses of the media elements. This includes integrating the media elements with both SVG (Scalable Vector Graphics) and the canvas
element to create the rather amazing effects you may have seen online. Ill also introduce you to upcoming and potential API support for both media elements, including generating audio as well as playing it.
Book Audience
Youll get the most out of this book if you are a web developer, author, or designer who wants to get up to speed on the HTML5 audio
and video
elements. No actual experience is necessary with either audio or video files, as there are numerous examples freely available on the web you can use for the examples, and I provide enough information to ensure you can work with those examples. However, youll get the most out of the book if you have worked with CSS and JavaScript before.
Though does get into the canvas
element and SVG, you dont need prior experience with either of these technologies in order to work with the examples.
Examples
OReilly provides a downloadable file with examples from this book. To be able to use the examples with a minimum of editing, most examples use generic names for audio and video files. Thus, audio files are called audiofile
, with whatever extension is appropriate, and video files are called videofile
with the appropriate extension. You can just use whatever video and audio files you have, renamed to match the examples, or change the examples to match your files.
I dont include actual video and audio files in the example because doing so would increase the size of the download file enormously. If you need example audio and video files, you can find freely available versions of each on the Internet. One video file I used with many of the examples is the short animated film Big Buck Bunny. This animated movie is fast becoming the de facto HTML5 video primarily because the video is provided in different formats, and is freely usable via its generous Creative Commons license.
You can read more about, and access Big Buck Bunny and other Blender Foundation videos at http://www.blender.org/features-gallery/blender-open-projects/. Blender is an open source and freely available tool for 3D content generation.
Note
In fact, you can easily find many different tools and utilities for working with audio and video files that are either freely available, shareware, or available for a 30 day trial. I cover some of these in the .
Another source for media files is the Internet Archive. This site has sections for both audio and video files that are either Creative Commons licensed for broad usage, or are in the Public Domain and freely available. The Library of Congress is also another great source for both video and audio files.
Note
The Internet Archive Moving Picture archive can be found at http://www.archive.org/details/movies, and the Audio archive is at http://www.archive.org/details/audio. Audio and video files can be found at the Library of Congress in the Digital Collections site at http://www.loc.gov/library/libarch-digital.html.
Target Browsers
Throughout the book, youll find me referring to target browsers . Since the video
and audio
elements are very new, the target browsers for this book are those that support both elements. At a minimum, this means Internet Explorer 9+, Firefox 3.5+, Opera 10.5+, Chrome 6+, and Safari 3.1+. At the time this book was written, the latest full release of each browser could work with the majority of examples in the book.
Some of the examples use more cutting edge CSS and JavaScript, such as the CSS3 transitions and transforms, These examples required beta, and in some cases, alpha software, to test. The alpha/beta software I used for these examples are IE 10, Firefox 6 (and 7), Opera Next, the Webkit Nightly build, and the Chrome Canary build. All but IE 10 are available in multiple operating system versions.