HTML and CSS Reference
In-Depth Information
Chapter . Customizing Media Elements
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.
Example9.Abasic,conformingHTML5webpagewithavideoelement,withthreedifferent
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 de-
scribed 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 a styling perspective, is the
div
element can contain oth-
er HTML elements, while the media elements can only contain the
source
and
target
ele-
ments.
