Review: HTML5 Multimedia: Develop and Design

by .

With a number of HTML5 books now available, we’re starting to see them cover more specific areas of HTML5. HTML5 Multimedia: Develop and Design, written by fellow HTML5 Doctor Ian Devlin, focusses on native multimedia in HTML5. Read my review below to find out what it’s all about.

Disclosure: Ian is a friend of mine (though I’ve never met him in real life, so I can’t actually confirm he exists), an HTML5 Doctor, and a fellow curator of HTML5 Gallery. This review isn’t biased though. It’s an honest opinion of the book.

I’ve been meaning to write this review since the book came out — and before Ian joined the surgeons on this site — but I didn’t get around to it. Thankfully much of the book is still relevant.

Although Ian’s book is primarily about HTML5 multimedia, he actually covers much more, including brief introductions to new HTML5 elements, parts of CSS3, canvas, SVG, and WebSockets whilst linking them all back to native multimedia. It’s a comfortable length, easy to read, has solid examples, and dives into lots of detail in places. There’s useful, practical information regarding such things as MIME types and MP4 profiles and other gotchas that you don’t always see in other books and articles. And the best thing: Ian has tested all this himself and not relied on someone else’s word.

Cover of HTML5 Multimedia: Develop and Design Book
HTML5 Multimedia: Develop and Design, by Ian Devlin

The book starts with an introduction to HTML5, including a potted history and some detail about many of the new elements. You can probably skip this chapter if you know a bit about HTML5.

The second chapter is dedicated to the history of web-based multimedia. Ian manages to tell the story in detail without making it boring. I found the web multimedia history lesson very interesting as it reminded me of the pains we endured making sites in the early days of the web. This chapter also introduces the four main multimedia elements (<audio>, <video>, <source>, and <track>) covered in the book, along with their associated attributes.

Chapters 3 and 4 cover <audio> and <video> and their attributes in further detail. It’s well-written and easy to understand with good humour expressed throughout the examples. Ian does perhaps gloss over some of the downsides, such as having to encode and host files multiple times, particularly for commercial sites (although it is mentioned in passing in Chapter 4). This is understandable, though, as native multimedia is still overall a big win for developers and users.

For video in particular, there’s good coverage of media queries and media types and even caveats for Android (or targeting other devices and serving appropriate content). Ian also includes a helpful tip about qtindexswapper that you may have seen in Ian’s recent Multimedia Troubleshooting article.

The next chapter covers the media API. It’s a simple and easy-to-follow introduction for someone (like me) who doesn’t write a lot of JavaScript. Ian shows how to script your own controls, amongst other things. It would’ve been nice to see complete code examples at the end of each section, so you could see exactly where each portion of the script fits in relation to the others.

Chapters 6 and 7 cover styling with CSS. If you’re up to speed with CSS3, then you should find it all simple enough. There’s all your standard rounded corners, gradients, and shadow shizzle included. The object properties and transitions and animation are also covered, which are good to know about.

I do have to question the value of these chapters for readers. Perhaps it’s beneficial for those with little knowledge of CSS, but overall these chapters feel too long and take up a large portion of content that could have been used to explore the API or accessibility (“a11y”) in more detail.

Speaking of a11y, that’s covered in Chapter 8. It includes a thorough introduction to WebVTT, the <track> element, and keyboard interaction. I would have liked to see Ian dig a little deeper and look at other a11y areas that are appropriate to multimedia.

Ian then looks at using video with canvas and SVG. He includes some useful ideas such as taking a screenshot using canvas or grey-scaling a video. For SVG, there are some excellent tips about masking and animating masks over video using SVG shapes (plus a brief intro to SVG for those who haven’t used it). He introduces SVG filters, but it was unclear to me how I link the SVG filters to the actual video files. Again, I think complete final examples would have been good to see here.

The book closes with a useful overview of where native multimedia is heading and introduces a number of new APIs coming soon (or already here in some cases) to a browser near you.

Summary

In summary, the book is easy to read and has an appropriate level of detail throughout with good examples to supplement the explanation. I’d definitely recommend this book to anyone who’s looking to do more with HTML5 Multimedia than simply add it to a site as you see in a lot of tutorials.

3 Responses on the article “Review: HTML5 Multimedia: Develop and Design”

Brandon N says

Thanks for the balanced review, Richard. As a developer diving deeper into HTML5, this book might be just the help I need. Would you recommend any other areas of HTML5 that deserve at least this much amount of focus on?

Alex says

Well, this week I will really start to learn html5. No more delays!

Dwight Zahringer says

This is a good book that has been floating from desk to desk in the development room of our agency for a bit. The media components and examples for the Android market was the reason we got it in the first place.

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.