HTML and CSS Reference
In-Depth Information
• Performing video post-processing in the browser using the
<canvas>
element
• Integrating video playback with other content
Clearly, the web is about more than text, but until HTML5 came along we had no built-in
way to play audio and video in the HTML standard. Instead, browsers had to depend on
third-party applications known as plug-ins.
Not so today. The web is increasingly being used as a replacement for traditional broadcast
media. Services like Netflix, YouTube, Spotify, last.fm, and Google Music seek to replace
your DVD and CD collections with online players. With HTML5, video and audio become
first-class citizens of web content. Rather than handing responsibility for playing media to
a third-party application, it's played within the browser, allowing you to control and ma-
nipulate media from within your web application.
In this chapter you'll learn to use HTML5's Media Element Interface while building a
video telestrator jukebox. A telestrator, made famous by U.S. football coach and announcer
John Madden, allows the user to draw directly onto a playing video; the term comes from
television sports broadcasting (television + illustrate = telestrate).
Why build the video telestrator jukebox?
These are the benefits:
• You'll learn to use the
<video>
element to add a video to a web page.
• You'll see how to control video playback with JavaScript using Media Element In-
terface.
• You'll discover how to support different browsers with different file formats using
the
<source>
element.
As you move through the chapter, you'll do the following:
• Build the basic jukebox framework
• Add videos to the web page with HTML5
• Use the HTMLMediaElement interface to load and play videos based on user se-
lection
