Chapter 5
Embedding Media
Chapter 4 was all about adding text content to your web pages, but now it’s time to put the “multi” in
“multimedia” with pictures, sound, and motion.
The very first image appeared on the Web in 1992 and they’ve been with us ever since. It wasn’t long
before people started finding ways to put audio and video online too, but there has always been one
primary obstacle: web browsers couldn’t play them. Although the browsers could handle ordinary static
images natively, additional plug-in applications were required to handle richer media. That’s changing in
HTML5. You’ll meet the audio and video elements in this chapter, and see how they can join the time-
honored img element to enrich your pages with more than just words and pixels.
Playing sound and video without a plug-in is certainly a leap forward for the Web, but plug-ins still serve a
purpose for other, more complicated duties. Great things can be accomplished with programs like Adobe’s
Flash and Microsoft’s Silverlight, creating dynamic, interactive, immersive experiences beyond simple
sound and motion. Plug-ins aren’t going extinct any time soon, and this chapter will show you how to
embed that external content into your web pages.
The third-party plug-in isn’t dead, but HTML5 does add one more nail to its coffin. The canvas element
creates a live surface where, with the help of JavaScript, web authors can draw complex graphics native to
the browser, even duplicating some of those dynamic, interactive, immersive experiences that required a
plug-in not so long ago. We can’t possibly cover all there is to know about creating dynamic graphics with
canvas in the pages of this book, but we’ll give you a brief introduction to set you on your way.
But first: images.