Supplemental files and examples for this book can be found at http://examples.oreilly.com/0636920019824/. Please use a standard desktop web browser to access these files, as they may not be accessible from all ereader devices.
All code files or examples referenced in the book will be available online. For physical books that ship with an accompanying disc, whenever possible, weve posted all CD/DVD content. Note that while we provide as much of the media content as we are able via free download, we are sometimes limited by licensing restrictions. Please direct any questions or concerns to .
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.