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.
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.
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.
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.
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.
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.
Get HTML5 Media now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.