Customizing Media Elements - HTML5 Media - page 55

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 ele-
ment 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 .

Table4.HTMLMediaElement Methods

Method Purpose

Checks the container type and codec information passed in the string to see
if the user agent can play the type

canPlayType(string)

Begins loading the media content load()

Pauses playback

pause()

Begins playback of the media content play()

Creates and returns a MutableTextTrack object

addTextTrack(kind, la-
bel, language)

The canPlayType method takes a string that contains the same string used with the type at-
tribute discussed in Chapter 1 . The syntax is container type, followed by the codec in video
then audio order. An example with Ogg Theora is:

video/ogg; codecs="vp8, vorbis"

The canPlayType method returns one of three values: