Chapter . Customizing Media Elements
In Chapter 1, we
looked at HTML5
video in the box. In this chapter, we’ll look at
how we can customize the 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.
<!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
described in the chapter can be applied, equally, to both
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
video element. The only difference between them, from ...