HTML and CSS Reference
In-Depth Information
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.
source elements
<!DOCTYPE html>
<meta charset="utf-8" />
<video controls width="480" height="270" poster="bigbuckposter.png">
<source src="videofile.mp4" type="video/mp4" />
<source src="videofile.webm" type="video/webm" />
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-
Search WWH ::

Custom Search