Working with HTML5 Audio
and Video
From its early days, the true rise of the World Wide Web began when textual information
could be displayed with formatting on the same page as media elements such as graph-
ics. Continuing in this tradition, HTML5 has introduced simple and standard <video> and
<audio> elements for using media of the named types. Unfortunately, support within browsers
is an ongoing struggle.In this chapter you learn how to use the MediaElement plugin, which harnesses the media
functionality available in today’s browsers and includes several custom plugins to provide sup-
port for older browsers.Downloading the MediaElement Plugin
The MediaElement plugin is conveniently located at http://www.mediaelementjs.com/. All the
needed materials are available in one download. From the build directory of the download,
obtain the mediaelement-and-player.min.js and mediaelement.min.css fi les for use in your
project. These fi les are the minimum required for functionality; additional fi les that might be
required for your use cases are described later in this chapter in the section “Implementing
h.264 Video Content.”Confi guring the MediaElement Plugin
The MediaElement plugin provides nearly two dozen confi guration options. Here you focus
on a few of the options; the entire list is available in Appendix U, “MediaElement.” To begin,
create the following markup, from Example 21-1.html in the source materials at http://www.wrox.
com/go/webdevwithjquery:<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />