How to Add Interactivity to HTML5 Video
Using HTML5 video, developers can do a whole lot more than just stream content. At the recent Streaming Media West conference in sunny Huntington Beach, California, Chuck Hudson, co-author of HTML5 Developer's Cookbook, led a master class on adding interactivity to videos.
"What we've come to talk about is making HTML5 -- the video tag -- interactive," Hudson began. "The video tag has provided a great means for us to embed video in different sources and such, and the assumption here is you may have played with at least a video tag, and you know how to at least play a video in there. But we're going to take that further."
What kind of interactivity can developers create? The sky's the limit. Hudson's talk told how to make hotspots, capture user input, and work with mobile devices.
"We really want to create an engaging experience that could include overlays on top of the video element. It could be controlling the timeline itself of the video. There's some neat things that we'll do with that," Hudson said. "Using subtitles and leveraging those subtitles to engage the user that much more, especially if we're doing localizable content, streaming video around the world. We're going to use Track meta tags, as well, and we're going to leverage those for some really interesting solutions where we can get into things like JSON object notation and start leveraging that for even more detailed data and information on these timelines of the video tag."
For detailed help on adding interactivity to HTML5 Video, watch the video below and download Hudson's presentation.
HOW TO: Making the HTML5 Video Element Interactive
Speaker: Chuck Hudson, Co-Author, HTML5 Developer's Cookbook
Overcoming obstacles that prevented it from making the switch previously, YouTube says HTML5 video is now ready for the spotlight.
How are viewers supposed to scan a QR code on a speeding race car? When it comes to selling with online video, even big brands miss the obvious.
With interactivity, HTML5 videos will become clickable and more engaging. But getting that functionality added across browsers will take some time.
Sorenson Squeeze 9 offers a simple solution for delivering HTML5 video in H.264 or WebM with Flash fallback. As long as you don't need features like adaptive streaming, closed captions, or DRM, Squeeze 9 does the trick.
Learn the essentials for creating H.264 and WebM video with this presentation (naturally, there's a little more emphasis on H.264 than WebM).