Chapter 21Working 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 graphics. 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 support 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 files for use in your project. These files are the minimum required for functionality; additional files that might be required for your use cases are described later in this chapter in the section “Implementing h.264 Video Content.”
Configuring the MediaElement Plugin
The MediaElement plugin provides nearly two dozen configuration 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 www.wrox.com/go/webdevwithjquery:
<!DOCTYPE HTML>
<html ...Get Web Development with jQuery 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.
