HTML and CSS Reference
In-Depth Information
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
Checks the container type and codec information passed in the string to see
if the user agent can play the type
Begins loading the media content
Pauses playback
Begins playback of the media content
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:
Search WWH ::

Custom Search