HTML and CSS Reference
Chapter 4. Advanced Media Element Scripting
The majority of HTML5 media element use focuses on their primary purpose, which is to play
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.
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
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.