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
The HTML5 Video element has now become widely used by browsers and supported in a broad set of websites for streaming video content. With some JavaScript and CSS, we can leverage the HTML video element to create highly interactive experiences for the viewer in both traditional and mobile browsing environments. This hands-on session explores the integration of events with the video timeline, creating positioned hotspots with links and dynamic content, and capturing user input. In addition, the session examines supporting mobile platform browsers along with future opportunities with the HTML5 video tag. Get sample code, ideas, and best practices for making the HTML5 video element an engaging interactive experience for your viewers.
Speaker: Chuck Hudson, Co-Author, HTML5 Developer's Cookbook
Related Articles
Overcoming obstacles that prevented it from making the switch previously, YouTube says HTML5 video is now ready for the spotlight.
28 Jan 2015
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.
22 Aug 2014
With interactivity, HTML5 videos will become clickable and more engaging. But getting that functionality added across browsers will take some time.
30 Dec 2013
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.
09 Oct 2013
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).
14 Feb 2013