All posts tagged ‘Popcorn.js’

File Under: HTML5, Multimedia

Mozilla’s Popcorn Project Adds Extra Flavor to Web Video

Video on the web has always been a bit disappointing.

After all, it’s pretty much just like television, only smaller. And unlike the rest of the web, video is just as much a passive experience in your browser as it is anywhere else.

Mozilla would like to change that. Developers at the browser maker’s Drumbeat project — an initiative that advocates new open web technologies — have created Popcorn, a tool intended to make web video every bit as interactive as the rest of the web.

Popcorn is a very new effort and still a bit rough around the edges, but results are already impressive. Popcorn adds metadata to HTML5 native web video, annotating videos with information like location, details about the people and topics in the video, subtitles, and licensing details. The metadata can be used in real time to add to the experience.

For example, the subtitles attached to the video can be sent to an online translation tool and converted to whatever language you want on the fly. JavaScript handles the syncing. Also, the location data associated with a video can be plotted on a map, and the viewer can browse the map while the video plays.

The most-cited advantage of HTML5 is that it allows for videos to be played in the browser without the use of plug-ins like Flash and Silverlight. But HTML5 affords another layer of utility — its native multimedia capabilities allow video and audio clips to be manipulated and enhanced by other things happening inside the browser. The look, size, position and controls of the video or audio file can be altered by JavaScript, CSS and Canvas animations. Playback can be enhanced with data pulled from the web’s many APIs. More than just a technology to side-step Flash, native video in HTML5 opens up a whole new set of interactive possibilities for video experiences on the web.

Check out Mozilla’s Popcorn demo page. You’ll see a number of widgets surrounding the main video. Popcorn.js pulls topics, places and people out of the video and plots the locations on a map and searches Wikipedia, Google News, Flickr and Twitter for more info on the people and topics in the video.

The result is what Mozilla developer Tristan Nitot calls “hypervideo.” What Nitot means is that Popcorn is connecting video to the rest of the web, linking it into the hypertext world.

If you’re not using a browser capable of running the demo, you can watch a video of the demo on the Drumbeat website.

As cool as this initial demo is, Popcorn is a long way from a finished product or even usable tool for anything beyond experimenting. Also, the demo shows off several widgets all at once, which makes the experience seem a little chaotic and crowded. But used as a spice, only where appropriate, Popcorn provides extra depth around videos, and the possibilities are thought-provoking.

See Also: