HTML5 Media

The Media Elements in More Detail

After that refreshingly simple jaunt through containers and codecs, we’ll return to looking at the media elements in more detail.

Media Elements and Global Attributes

The audio and video elements both support the same set of global attributes:

accesskey

A unique, ordered, and space separated (as well as case sensitive) set of tokens that enables specifically named keyboard key access to the media element.

class

A set of space separated tokens specifying the various classes the element belongs to.

contenteditable

If true, content can be edited; if false, content cannot be edited.

contextmenu

The id of the context menu associated with the element.

dir

The directionality of the element’s text.

draggable

Whether the media element can be dragged. If true, the element can be dragged; if false, the element cannot be dragged.

dropzone

What happens when an item is dropped on the element.

hidden

A boolean attribute that determines if the element is “relevant”. Elements that are hidden are not rendered.

id

A unique identifier for the element.

lang

Specifies the primary language of the element’s contents.

spellcheck

Set to true for enabling spell and grammar checking on the element’s contents.

style

Inline CSS styling.

tabindex

Determines if media element is focusable, and the element’s order is in the tabbing sequence.

title

Advisory information, such as a tooltip.

data-*

Custom data type, such as data-myownuse or data-thisappsuse. Used to read and write custom data values for use in your own applications.

Of course, not all of the global attributes seem relevant with both of the media elements. For instance, I can’t see how it is possible to spell or grammar check the contents of a video. Others, though, are very useful.

If you need to access a specific audio or video element using JavaScript, you’ll need to set its id attribute. You can capture an entire set of media elements in a page, and pinpoint the specific one you want by its page position, but it’s easier just to use id.

If you have more than one media element on possibly different web pages, and you want to provide the same CSS styling for each, you’ll need to assign a class for each, and then use the class name in your CSS stylesheet.

Being able to drag and drop media elements is a viable web action, so the draggable and dropzone attributes are useful. So are the accesskey and tabindex attributes if you want finer control over the element’s keyboard access.

The hidden attribute may not seem as viable at first. However, you could use it to remove an audio or video element from rendering, while still ensuring access to the contents for purposes that don’t depend on immediate reader access.

Media-Specific Attributes

In addition to the global attributes, there are also several media-specific attributes that are shared by both the audio and video elements. We’ve seen the src and controls attributes used in previous examples. The rest are provided in the following list:

preload

The preload attribute provides hints to the user agent about preloading the media content. By hints, I mean that hopefully the user agent follows the directive, but may or may not. The acceptable values are none, which hints to hold on preloading the media until the user presses the play button (or otherwise wants the video to load); metadata, which hints to load the media’s metadata only; or auto, the default state, which hints to the user agent to go ahead and download the resource.

autoplay

The autoplay attribute is a boolean attribute whose presence signals the user agent to begin playing the media file as soon as it has loaded enough of the media file so that it can play through it without stopping. If autoplay is added to a media element, it overrides the preload setting, regardless of setting.

loop

The loop attribute resets the media file back to the beginning when finished, and continues the play.

muted

If the muted attribute is present, the media plays, but without sound. The user can turn on the sound via the media controls, if they wish.

mediagroup

The mediagroup attribute provides a way to group more than one media file together.

At the time this was written, the new mediagroup attribute had not been implemented by any browser. According to the specifications, if the attribute is provided for two or more media elements, they’ll all be managed by the same implicitly created media controller. We can assume from the documentation that if one of the media files is played, the others are kept in sync. This behavior could be very helpful in situations such as having a video of a speech in one element, and a sign language interpretation of the speech in another element, or for emulating picture-in-picture with two videos.

The muted attribute is also extremely new, and had not been implemented—as an attribute—in any browser when this was written.

The combination of loop and autoplay can be used to create a background sound for when a page is loaded. You’ll want to use this functionality sparingly, but it could be useful if you’re creating a more presentation-like website where sound is tolerated, even expected, by your web page readers. Example 1-6 demonstrates how to use these attributes with an audio element that doesn’t have a controls attribute, and is also hidden using CSS, just in case the user’s browser has scripting disabled. The sound will play as soon as the page and media are loaded, and continue to play until the user leaves the page.

Example 1-6. A repeating auto started audio file in two different formats to ensure browser coverage

<!DOCTYPE html>
<head>
   <title>Repeating Audio</title>
   <meta charset="utf-8" />
   <style>
      #background
      {
          display: none;
      }
   </style>
</head>
<body>
   <audio id="background" autoplay loop>
      <source src="audiofile.mp3" type="audio/mpeg" />
      <source src="audiofile.ogg" type="audio/ogg" />
   </audio>
</body>

The example works in IE, Opera, Chrome, and Safari. It only partially worked in Firefox at the time this was written because Firefox (5, 6, or 7) doesn’t currently support the loop attribute.

You’ll want to use display: none for the CSS style setting of the audio element, to ensure that the element doesn’t take up page space. You might be tempted to use the hidden attribute, but doing so just to hide the element is an inappropriate use of the attribute. The hidden attribute is meant to be used with material that isn’t relevant immediately, but may be at some later time.

You can use the loop and autoplay with video files, but unless the video file is quite small, or encoded to load progressively, you’re not going to get the same instant effect that you get with audio files.

Video-Only Attributes and Video Resolutions

There are a couple of attributes that are only specific to the video element.

poster

The poster attribute is a way of providing a static image to display in the video element until the web page reader plays the video.

width, height

The width and height attributes set the width and height of the video element. The control will resize to fit the video when it’s played, but if the video is larger than the control, it pushes content out of the way and can be quite distracting to web page readers. If the video is smaller than the control, it’s centered within the space.

The actual width and height of a video are directly related to the resolution of the video. If you have a Standard Definition (SD) video, you have a video that’s 480 pixels in height (480 lines). If you have an HD video, you have a video that’s 720 lines (pixels) tall, or taller. You can find the exact frame dimensions using a tool such as Handbrake (covered later in the chapter).

The poster and the width and height attributes imply that you know the size of the video. You’ll want to provide the same size poster image as the video, and you’ll want to size the control the same as a frame in the video. Providing both attributes ensures that your video presentation is smooth and polished, rather than other page content abruptly being pushed down as the video element automatically expands.

Example 1-7 shows a web page with a video element and two source elements that has the width, height, and poster attributes set.

Example 1-7. Video with the width and height set, as well as a poster image to display

<!DOCTYPE html>
<head>
   <title>Birdcage</title>
   <meta charset="utf-8" />
</head>
<body>
   <video controls width="640" height="480" poster="birdcageposter.jpg">
      <source src="birdcage.mp4" type="video/mp4" />
      <source src="birdcage.webm" type="video/webm" />
   </video>
</body>

The video controls are placed over the content, including the poster image, so place text in the poster image accordingly. In addition, Safari and IE seem to hide the poster image once the video has been fully cached, but Firefox, Opera, and Chrome will redisplay the poster image when the page is refreshed, even with the video cached, as shown in Chrome in Figure 1-4.

Figure 1-4. Video playing in Chrome with a poster image and width and height set, after video is fully cached

Regardless of how browsers handle the width, height, and poster attributes, their use increases the polished perception of the video.