HTML and CSS Reference
In-Depth Information
Chapter 4. Advanced Media Element Scripting
The majority of HTML5 media element use focuses on their primary purpose, which is to play
media resources. We might use JavaScript to craft new controls or improve the accessibility
of the content, and eventually we'll see what we can do with media controllers and multiple
tracks—but we'll rarely go beyond these core capabilities.
However, some folks have looked beyond the basic boxes of the
video
and
audio
element,
and have demonstrated the use of these elements with other technologies, including SVG
(Scalable Vector Graphics) and the
canvas
element. In addition, a couple of the browser com-
panies have expanded the capability of the
audio
element so that it can generate sound as well
as play it.
In this chapter, I'll introduce you to some of these advanced experimentation efforts with the
HTML5 media elements, and provide some background so that you can give these effects a
try on your own.
NOTE
Most of the material in this chapter has very limited support among browsers. The only browser cap-
able of working with all the examples (at this time) is Firefox. I'll note browser support with each.
Many of the examples are also very CPU-intensive. Use cautiously.
Media Elements and Canvas
HTML5 not only gave us the media elements, it also formalized the
canvas
element. The
canvas
element was introduced by Apple years ago, and provided a way for us to draw into
an area directly in the web page. Most browsers supported the element and associated API.
However, the element was standardized in HTML5 and now all of our target browsers support
it.
You can combine the HTML5 media elements with
canvas
to create some amazing effects.
Mozilla demonstrated one such effect by showing how the
canvas
element, combined with
HTML5 video, could be used to replace the plain greenscreen background of a video with the
Firefox logo. Doctor HTML5 demonstrated how to create a grayscale effect using HTML5
video and canvas. Sebastian Deutsch combined HTML5 audio with canvas and Twitter for a
musical visual treat.
