-->

HTML5 Video Element to Gain Interactivity

Article Featured Image

It doesn't seem like it's on the fast-track, but sometime in the next year-and-a-half HTML5 video interactivity should become standard in web browsers. That's the thinking of Chuck Hudson, co-author of The HTML5 Developer's Cookbook, who spoke on a panel at the recent Streaming Media West conference in Huntington Beach, California. Hudson sat down for a red carpet interview to talk about what this interactivity will mean for developers and viewers.

"Everyone’s used to embedding video now from the major sites for streaming videos. But where we typically leave it off is just leaving the user to view the video and not actually engaging them and being interactive," Hudson said. "The talk today was about adding components and adding experiences via things like subtitling and metadata onto the video itself to allow people to actually click on items in the video, hotspots, have better navigation with the video experiences and, overall, engage the user much more."

The main challenge for HTML5 video interactivity is getting browser manufacturers to add the functionality and do it in a consistent manner.

"This is on a backlog list for the browser manufacturers to actually implement in each browser. So the challenge there is the priority of it being implemented and then also consistency across the browsers for the implementation," Hudson explained. "The basic elements -- the video element and the source tags -- are very widely supported and consistently supported, but as we move down the technologies stack into text tracks and cues and events on cues being fired, that’s when it becomes less reliable and less consistent across the board."

To see the full interview, watch the video below.

 

Troy Dreier: Hi, we’re coming to you from Streaming Media West, sunny Huntington Beach, California. I’m joined right now by Chuck Hudson, co-author of the “HTML5 Developers’ Cookbook”. Chuck was talking on a panel about HTML5 and specifically the video element to allow video playback in browsers. Chuck, maybe if you could just start us off by explaining what the video element is, what it does.

Chuck Hudson: Sure. So the video element is a new element inside HTML5 through the media API library that allows, without any outside plug-ins, to stream video for the users’ viewing inside the browser environment. Along with that it provides various additional features, things like providing different sources so that different browsers can all use the same video experience.

Troy Dreier: Well, I know that getting video to play back in a browser has been a goal for a long time, playback in a browser without requiring additional plugins. And you were talking about today making the video element interactive, right?

Chuck Hudson: Correct.

Troy Dreier: Things that you can add to it. Tell us a little bit about what’s going on beyond just playing back video.

Chuck Hudson: So everyone’s used to embedding video now from the major sites for streaming videos. But where we typically leave it off is just leaving the user to view the video and not actually engaging them and being interactive. So the talk today was about adding components and adding experiences via things like subtitling and metadata onto the video itself to allow people to actually click on items in the video, hotspots, have better navigation with the video experiences and, overall, engage the user much more in the user experience at a higher level and keeps them engaged in the experience for that website, for that content.

Troy Dreier: Is this all part of the HTML5 spec or is this something people need to add on to get this functionality?

Chuck Hudson: So the neat thing is part of it is part of the spec-- so it’s part of the video element. So we have things like text tracks and cues that can be leveraged. But at the same time we’re using other HTML elements that have either been around or as part of the HTML5 spec in combination with the video element. So that could be everything from divs being overlaid on top, to the new canvas element and actually adding effects to the video and then rendering it on the canvas element itself.

Troy Dreier: Mm-hm. And who’s doing this right now? Where can viewers go to see this kind of interactive activity in HTML5 video?

Chuck Hudson: So the interactiveness, our independent developers, independent groups, companies that are taking the video beyond and understanding that you can embed these interactions inside the video on top of the video when the video starts playing. So you see it from everything from the ads that pop up based on the context in the video to experiences such as video commerce, where if you see something in the video based on a hotspot, you can click right on it and actually purchase an item from the video.

Troy Dreier: Now you said “independents”. Does that mean, like, the major broadcasters, the premium content providers are not on board with this yet?

Chuck Hudson: The adoption rate is growing as the technology becomes more stable. Right now the technology itself is pretty nascent, pretty young, and as we go further along that technology, especially deeper down into things like the text tracks and cues will become much more popular as it becomes more reliable.

Troy Dreier: As you said, this is a pretty young technology and when people first started talking about it there was a long wish list of things they wanted to see added to it to really get it ready for primetime. What are the challenges it still faces?

Chuck Hudson: Great question. So the challenges are very much we have a specification that has explained how the elements should work in the events that are fired in the properties and attributes. The challenge is, of course, this is on a backlog list for the browser manufacturers to actually implement in each browser. So the challenge there is the priority of it being implemented and then also consistency across the browsers for the implementation. So right now, you know, the basic elements-- the video element and the source tags-- are very widely supported and consistently supported, but as we move down the technologies stack into text tracks and cues and events on cues being fired. That’s when it becomes less reliable and less consistent across the board. Only a couple browser manufacturers support those now and it’s not a reliable solution that can be used in a lot of production environments.

Troy Dreier: What’s your own personal timeline of when it will become more reliable?

Chuck Hudson: I believe for the bulk of it, it will probably be in the next year, year and a half. We’ll see-- you know, these are known issues that the browser manufacturers already know about. And as people start trying more and more and as main production houses and major websites start getting on board wanting to use this technology there will be that additional pressure for them to move up the priority of those features and the defect resolutions.

Troy Dreier: Very good. Well, thank you for joining me. This is Troy Dreier coming to you from the red carpet at Streaming Media West.

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

How to Add Interactivity to HTML5 Video

Add overlays, control the video timeline, insert subtitles, and offer localized content. Create new experiences with interactive HTML5 video.