Chapter 1. HTML5 Audio and Video Elements: By-Default

The media elements, as the HTML5 audio and video elements are generically termed, are a way of embedding playable media files directly into a web page without having to use Flash or a plug-in. The elements can be styled with CSS, integrated with SVG and Canvas, and controlled with JavaScript.

Browsers and other user agents that implement the HTML5 media elements also provide default controls and behavior for each. In this chapter, I cover how to add HTML5 video and audio elements to your web page, and explore some of the implementation differences among the browsers. I also cover the more widely supported media file codecs and containers, and browser support for each.

Support for the media elements is relatively broad, though not all features of the media elements are supported in all browsers. Table 1-1 provides a listing of popular browsers and mobile environments, and the version of each that provides at least a minimum of support for the media elements.

Table 1-1. Support for HTML5 audio and video, by popular browser and mobile OS

User Agent

Version

Internet Explorer

9+

Google Chrome

3+

Firefox

3.5+

Opera

10.5+

Opera Mini

11+

Safari

3.1+

iOS

3.0+

Android OS

2.0+

Adding a Media Element to a Web Page

The HTML5 media elements share a common syntax and subgroup of attributes. The only difference between the two elements is the content they manage, and a small group of additional attributes for the video element.

Minimal Element Syntax

The simplest syntax to add a media element to the web page is demonstrated in Example 1-1. In the HTML, an audio element is used to embed an audio file encoded as Ogg Vorbis into the web page. The URL for the audio file is given in the audio element’s src attribute. The element’s style and behavior will be the default defined in the HTML5 specification and implemented by the browser.

Example 1-1. HTML5 web page with embedded audio file using an audio element

<!DOCTYPE html>
<head>
   <title>Audio</title>
   <meta charset="utf-8" />
</head>
<body>
   <audio src="audiofile.ogg">
   </audio>
</body>

The page validates as proper HTML5, and Firefox, Chrome, and Opera all support the file type. When you load the page in these browsers, you don’t get an error. However, when you look at the page, you won’t see anything.

Compare Example 1-1 with the following:

<!DOCTYPE html>
<head>
   <title>Video</title>
   <meta charset="utf-8" />
</head>
<body>
   <video src="videofile.ogv">
   </video>
</body>

Unlike the audio element, the video element has a play area that should show as long as there’s no error loading the video, and the video element isn’t deliberately hidden. If you want to actually see the audio file in the page, you need to add the controls attribute. Since controls is a boolean attribute, all you need do is add the attribute word:

<audio src="meadow.ogg" controls>
</audio>

Note

A boolean attribute is one where a value doesn’t need to be assigned to the attribute: its very presence implies a true value, while the lack of the attribute implies a default false value. However, boolean attributes must be assigned a value if you’re serving your page up as XHTML, or you’ll get a page error. The standard approach for XHTML5 is to assign the attribute a value equal to the attribute name, contained within quotes and without any extraneous white space (controls="controls").

Figure 1-1 shows the audio element in Firefox after the controls attribute has been added. The control is rather plain, but it does the job. You now know an audio file has been added to the page, and you can start and stop the audio file, change the volume, and watch its progress as it plays.

Audio element with default control in Firefox 4

Figure 1-1. Audio element with default control in Firefox 4

Disabled Scripting and the Magically Appearing Controls UI

Both the video and audio elements support the controls attribute for adding a default control UI (user interface) for the media resource. If you don’t want the default control UI, leave the attribute off. Note, however, that something interesting happens with the control UI when scripting is disabled: in at least one browser, the control UI is added to the media element, whether you want it or not.

Web developers wanting to provide custom controls remove the controls attribute so that the default control doesn’t conflict with the custom control. The developer typically adds the controls attribute to the video or audio element, and then removes it using script as soon as the media element is loaded. This form of progressive enhancement ensures that if scripting is disabled, the user can still play the media resource.

However, sometimes people deliberately leave the controls attribute off the media element because they’re using the media element as part of a web page presentation and want the media to play as soon as the page loads—regardless of whether scripting is enabled or not. They’ll remove the controls attribute, and add autoplay and possibly the loop attribute (covered later in the chapter). If scripting is enabled, the default media control isn’t added to the page—but if scripting is disabled in the user’s browser, according to the HTML5 specification, the browser is then supposed to add the control, by default.

This is an unusual event without precedent in web development. It’s comparable to the browser overriding CSS to display hidden or collapsed fields if scripting is disabled, regardless of what the developer or author wants.

Currently, Opera is the only browser that actually provides a visible control if scripting is disabled. The other browsers are technically in violation of the HTML5 specification, though I couldn’t find bugs for any of the browsers asking for this behavior. There are, however, bugs filed against the HTML5 specification to remove this unusual fallback feature. Since we don’t know if the bugs will result in a change to the specification or not, you’ll want to test your use of the HTML media elements with scripting enabled and disabled, regardless of whether you use scripting in your page or not.

Warning

Another browser foible: if scripting is disabled, Firefox doesn’t currently display a control UI (User Interface) even if you do provide the controls attribute. You’ll need to use the right mouse button context menu to control the media. More on this in Chapter .

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.

Start your free trial