Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Summary

You’ve seen how HTML5 gives you the first credible alternative to third-party plugins. The incompatible codec support currently makes it harder than using plugins to simply embed video in a page and have it work cross-browser.

On the plus side, because video and audio are now regular elements natively supported by the browser (rather than a “black box” plugin) and offer a powerful API, they’re extremely easy to control via JavaScript. With nothing more than a bit of web standards knowledge, you can easily build your own custom controls, or do all sorts of crazy video manipulation with only a few lines of code. As a safety net for browsers that can’t cope, we recommend that you also add links to download your video files outside the <video> element.

There are already a number of ready-made scripts available that allow you to easily leverage the HTML5 synergies in your own pages, without having to do all the coding yourself. jPlayer (www.jplayer.org) is a very liberally licensed jQuery audio player that degrades to Flash in legacy browsers, can be styled with CSS, and can be extended to allow playlists. For video, you’ve already met Playr, MediaElement.js and LeanBack Player which are my weapons of choice, but many other players exist. There’s a useful video player comparison chart at http://praegnanz.de/html5video/.

Accessing video with JavaScript is more than writing new players. In the next chapter, you’ll learn how to manipulate native media elements for some truly amazing effects, or at least our heads bouncing around the screen—and who could conceive of anything more amazing than that?

  • + Share This
  • 🔖 Save To Your Account