HTML5 Hacks

Chapter 3. Multimedia Hacking

HTML5 introduces new native multimedia functionality that upgrades audio and video elements into first-class elements. Because they are native elements (as opposed to plug-ins), they can be styled with CSS, can be accessed via JavaScript, and will utilize the GPU.

In addition to being flexible, this functionality is also easy to use—in most cases it’s as easy as embedding an image in the page. HTML5 audio and HTML5 video have very similar implementation methods and very similar JavaScript APIs. Although most of this chapter presents hacks that utilize HTML5 video, take note that many of the same hacks can be performed with the audio element as well. The API for “play” on a video element is the same as the API for “play” on an audio element.

If there is anything to get excited about in HTML5, it’s how web developers have been freed from using “browser plug-ins” to deliver multimedia. Gone are the days of users having to download and install a different plug-in for every website just to view a video clip.

Hack 28. Embed Video Directly in Your Application with HTML5 Video

Video is now mainstream in HTML5. Forget plug-ins, forget supporting video players, and welcome to the world of native video through HTML5. See why it’s such a big deal to have video as its own page element.

What’s the big deal with HTML5 video? We’ve been playing video on the Web for years. The answer is that the Web is changing. In years past it was pretty easy ...