HTML5 Media

Chapter . Customizing Media Elements

In Chapter 1, we looked at HTML5 audio and video in the box. In this chapter, we’ll look at how we can customize the elements.

We’ll try our hands at customizing the appearance of the controls with CSS, first, and then creating a custom set of controls using CSS and JavaScript. We’ll also explore, in-depth, the HTMLMediaElement—the core element that provides API support for both media elements.

Lastly, I’ll demonstrate how to use the browser debugger tools in order to determine exactly what each browser currently supports with the HTML5 media element.

The HTML5 web page we’ll use as the base for all of the examples is given in Example 9. No fallback content is shown, in order to keep the examples as clean as possible.

Example 9. A basic, conformingHTML5 web page with a video element, with three different source elements

<!DOCTYPE html>
<head>
   <title>video</title>
   <meta charset="utf-8" />
</head>
<body>
   <video controls width="480" height="270" poster="bigbuckposter.png">
      <source src="videofile.mp4" type="video/mp4" />
      <source src="videofile.webm" type="video/webm" />
   </video>
</body>

The examples in this chapter focus on the video element. However, many of the effects described in the chapter can be applied, equally, to both audio and video.

CSS Styling

Both HTML5 media elements are block elements. Think of them as div elements…with perks. However you can style a div element, you can style an audio or video element. The only difference between them, from ...