Web Development with jQuery (2015)

Part III. Popular Third-Party jQuery Plugins

Chapter 21. 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 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 atwww.wrox.com/go/webdevwithjquery:

<!DOCTYPE HTML>

<head>

content='application/xhtml+xml; charset=utf-8' />

<title>MediaElement Plugin</title>

</head>

<body>

</div>

</body>

</html>

CSS is referenced, but the rules do not influence the presentation of this example. The following JavaScript (in Example 21-1.js) is included for configuring and activating the MediaElement plugin:

$(document).ready(

function()

{

$('video,audio').mediaplayerelement(

{

clickToPlayPause: true,

features: ['playpause', 'current', 'progress', 'volume'],

poster: 'images/FilmMarker.jpg'

}

);

}

);

The code results are shown in Figure 21.1.

Figure 21.1

Start by using the HTML5 <video> element to specify the media file and dimensions.

Then use jQuery to select all <video> and <audio> elements on the page, activating the MediaElement plugin on them with the clickToPlayPause, features, and poster configuration options.

$('video,audio').mediaplayerelement(

{

clickToPlayPause: true,

features: ['playpause', 'current', 'progress', 'volume'],

poster: 'images/FilmMarker.jpg'

}

);

The features option is discussed in the section “Customizing Player Controls.” The clickToPlayPause option is nearly self-explanatory; like the well-known YouTube feature, you can click anywhere on the video to play or pause the video. The poster option enables you to display an image before the video starts playing. Without this option, the MediaElement plugin would display the first frame of the video by default. Common uses include showing a frame from the middle of the video (previously saved to an image file) or showing a flashy Check Out Our Video marketing graphic.

Creating an HTML Structure That Enables Fallback Video/Audio Plugins for Older Browsers

You might have noticed that an h.264 (MP4) video file was used in the last example. The next section discusses this format, which is one of three formats (h.264, Ogg, and WebM) supported in the HTML5 video specification. In this discussion, you see one of the best reasons to use the MediaElement plugin: its capability to display media files in browsers that do not have native support for those formats, all without losing the capability for newer browsers to natively play the content. The plugin enables a fallback to supported formats by supplying multiple sources until a supported one is found. Review the following markup (from Example 21-2.html):

<!DOCTYPE HTML>

<head>

content='application/xhtml+xml; charset=utf-8' />

<title>MediaElement Plugin</title>

</head>

<body>

data='flashmediaelement.swf'>

</object>

</video>

</div>

</body>

</html>

Note that the source is no longer specified in the <video> element; instead, you now have multiple <source> elements. The MediaElement plugin first attempts to load natively supported formats and then formats supported by the Silverlight plugin. In addition, this example markup includes a fallback to the Flash plugin if none of the <source> elements were supported.

Implementing h.264 Video Content

The h.264 video format has become the new de facto standard for digital video. It is used by YouTube, Apple, and over-the-air HDTV providers. It is also one of the encoding standards for Blu-ray discs. In this section, you learn how to convert and distribute your video content in this format.

Encoding Using Handbrake or QuickTime

The format of your video content depends on whether you obtain or generate the video content (and from which device the content is generated). If you want to use the h.264 format and need to convert from another video format, you need to obtain a video conversion utility. Recommended utilities are Handbrake (https://handbrake.fr/) and QuickTime (https://www.apple.com/quicktime/). Handbrake is explicitly recommended if you are not using a Mac. In addition, QuickTime Player (v. 10+) on a Mac enables you to Export from the File menu, but Apple recently (since version 10.3) reduced the available functionality. Each tool contains device presets to produce the expected video size and quality when targeting users on desktop computers and mobile devices of various capabilities.

Using the HTML5 <video> Element

The HTML5 <video> element specification allows for multiple <source> elements, as shown in the previous section. In this manner, you can add an element for each of the three supported formats (h.264, Ogg, and WebM) and be certain of content playback on all modern browsers.

Using the Flash Player Plugin

To avoid encoding your video content in multiple formats, you can instead add fallback markup to specify that the MediaElement plugin should use Flash to play your h.264 video file:

data='flashmediaelement.swf'>

<param name='flashvars'

value='controls=true&file=testvideo1.mp4' />

</object>

This plugin utilizes the flashmediaelement.swf Flash video to play your content, where your filename is passed in the flashvars param.

Using Microsoft's Silverlight Plugin

Although you can include <object> element markup for the Silverlight plugin in a manner similar to that for the Flash plugin, Silverlight requires many additional parameters that are generally best created by the MediaElement plugin. Silverlight provides support for formats such as Windows Media Video in browsers where such formats are not supported.

Customizing Player Controls

As previously discussed, the MediaElement plugin provides many configuration options. The features option customizes which controls display to the user.

features: ['playpause', 'current', 'progress', 'duration', 'volume', 'fullscreen']

Most of the available controls or features are self-explanatory, with the preceding code indicating a play/pause button and displaying the current position, progress bar, video length, volume control, and full-screen button, respectively.

Following are common options that can be provided in the features array:

· playpause—A control button to play or pause the media, switching its icon to appropriate action for the media's state.

· current—A display of the media's current position, in typical HH:MM:SS format.

· progressbar—A filled bar control to display the current position of the media against its duration.

· duration—A display of the media's length, in typical HH:MM:SS format.

· volume—A control button with an integrated slider for setting the volume.

· tracks—A control button to toggle display of captions or subtitles specified by <track> elements inside the <video> element. It is important to note that browsers have differing security policies for local text track files.

· speed—A speed control button with options menu for setting the playback speed.

Controlling When the Download of Media Begins

A few concerns should factor into the decision for when your media content should download (or buffer) within the user's browser; among them are the size of the video and the expected probability that the user will play the media. The actual control is indicated by the value of the optional preload attribute of the <video> or <audio> element.

<video src='testvideo1.mp4' width='320' height='240'

preload='metadata'></video>

Following are the possible values:

· (no preload attribute specified)—Enables the browser to determine whether the media data should be preloaded.

· none—No media data should be preloaded. A poster image attribute or option for video content would be recommended unless you prefer that the user sees a solid, black frame until content playback activates.

· metadata—Metadata for the content should be downloaded, but the media data should not be preloaded. This value enables the element to display the content's first frame, duration, and track information and is a recommended minimum value.

· auto (also a blank value or attribute with no value) —The full media data should be downloaded.

You might have noticed the word “should” in each value definition. The HTML specification states that browsers should consider these values as hints instead of requirements. For instance, mobile device browsers often avoid preloading data regardless of the value.

Summary

In this chapter, you learned about the MediaElement plugin and how to use it to enable consistent audio and video content in browsers. You learned about the HTML5 <video> and <audio> elements.

You learned about the three video formats supported by the HTML5 <video> element in various browsers. You learned more about one of these formats, h.264, and wrote code to display this video format.

You learned about additional MediaElement plugins to support Flash and Silverlight content and saw how multiple <source> elements enable browser fallback to a supported format.

Finally, you learned about common configuration options for the MediaElement plugin and the ability to request control of content download timing with the preload attribute.

Exercises

1. The MediaElement plugin standardizes browser support for which two HTML5 elements?

2. Which HTML5 element can be repeated inside a media element to allow the browser to render a supported format?

3. Which three video formats are supported in the HTML5 specification?

4. Name the MediaElement configuration option that enables captions or subtitles.

5. Which HTML5 attribute specifies when media content should download to the browser?