HTML5 Media

Custom Controls with JavaScript and CSS

One of the concerns people had about the media elements, right from the start, is the fact that you can’t customize the controls using CSS. As the last section demonstrated, you can add borders and overlays (as well as transforms and transitions) to a media element, but you can’t style the control buttons or even move the control independently of the media element.

Luckily, there is an option that provides this missing facility: using JavaScript, CSS, and the HTML media API (Application Programming Interface) to create and style custom media element controls.

Creating a Basic Control

User agents such as browsers that provide support for the HTML5 media elements also expose the HTMLMediaElement interface. This interface provides a set of methods, properties, and events that provide information about, as well as an ability to control, the media elements.

The HTMLMediaElement methods are given in Table 4.

Table 4. HTMLMediaElement Methods

Method	Purpose
canPlayType(string)	Checks the container type and codec information passed in the string to see if the user agent can play the type
load()	Begins loading the media content
pause()	Pauses playback
play()	Begins playback of the media content
addTextTrack(kind, label, language)	Creates and returns a MutableTextTrack object

The canPlayType method takes a string that contains the same string used with the type attribute discussed in Chapter 1. The syntax is container type, followed by the codec in video then audio order. ...