HTML5 Media

Preface

Flash is dead.

At least, that’s what we’re told: thanks to the introduction of the HTML5 video and audio elements, Flash is now dead.

Of course, we know this statement isn’t true: Flash will have its place in web pages for many years to come. However, thanks to the new HTML5 media elements, we’re 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 we’d have to use a combination of object elements, embeds, and links, just to ensure that a video could be played. It wasn’t unusual to find the following in web pages:

<object width="425" height="350">
   <param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U">
   </param>
   <embed src="http://www.youtube.com/v/7_6B6vwE83U"
   type="application/x-shockwave-flash" width="425" height="350">
   </embed>
</object>

Though we could get a video or audio resource to play, we couldn’t really do anything with it. We certainly couldn’t 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 elements—audio and video—that provide the long overdue functionality we’ve needed to really take advantage of audio and video in web pages. Best of all, solid support for the media element’s basic functionality is already available in all modern browsers and in most mobile environments.

So while Flash isn’t dead, it also isn’t the only option we have, and having more options is a very good thing.

Note

As I note in Chapter 1, 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 Chapter 1, 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 Chapter , 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 Chapter , 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. We’ll 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 Chapter 4, 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. I’ll also introduce you to upcoming and potential API support for both media elements, including generating audio as well as playing it.

Book Audience

You’ll 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, you’ll get the most out of the book if you have worked with CSS and JavaScript before.

Though Chapter 4 does get into the canvas element and SVG, you don’t need prior experience with either of these technologies in order to work with the examples.

Examples

O’Reilly 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 don’t 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 Appendix A.

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, you’ll 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.

I’ll make a point to note when alpha and beta software was required to ensure an example worked, or if an example only works in some browsers.

The Polyglot Question: HTML or XHTML?

HTML5 supports two different serializations: HTML and XHTML. HTML5 documents are served with a text/html MIME type, while XHTML5 documents are served with an application/xml or application/xhtml+xml MIME type. The majority of web pages are served as HTML.

There are differences in syntax between the two. HTML allows uppercase element and attribute names, unquoted attribute values, and you don’t have to use closing tags, or the empty-tag syntax with void elements such as the img element:

<img src="somesource.jpg" alt="some desc" />

In addition, HTML allows you to use boolean attributes without values, while XHTML requires an assignment:

<video src="somemovie.mp4" controls="controls"></video>

There are other differences, but these are the ones I wanted to highlight.

The example pages in this book work only with the HTML serialization, primarily because I do make use of boolean attributes without assignment. I really dislike having to assign a kludge value to a boolean attribute. However, I also use quotes with attributes, close tags, and never use uppercase letters for elements and attributes. If you want to serve the example pages I provide as XHTML, you’ll need to modify the examples accordingly.

Note

The WHATWG organization provides a Wiki page on polyglot differences between HTML and XHTML serializations at http://wiki.whatwg.org/wiki/HTML_vs._XHTML. There’s also a formal document on the same at the W3C at http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html.