▼ Scroll to Site ▼

How to Add Interactivity to HTML5 Video

Article Featured Image

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

Streaming Covers
Free
for qualified subscribers
Subscribe Now Current Issue Past Issues
Related Articles

YouTube Defaults to HTML5 Video and VP9 Codec for Most Browsers

Overcoming obstacles that prevented it from making the switch previously, YouTube says HTML5 video is now ready for the spotlight.

Online Video Ecommerce Fails: Big Brand Mistakes to Avoid

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.

HTML5 Video Element to Gain Interactivity

With interactivity, HTML5 videos will become clickable and more engaging. But getting that functionality added across browsers will take some time.

Video Tutorial: Supporting HTML5 with Flash Fallback in Sorenson Squeeze 9

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.

How to Encode Video for HTML5

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).