Our Annotated HTML Video Player: Free and Open Source

Detail from the annotated video player for "An Unquiet Landscape: the American West’s New Energy Frontier"

By GEOFF McGHEE

Background: Building a Better Video Player

Video is a powerful medium, but one that brings its own constraints. A complex and nuanced story can be hard to tell even in a 30 minute documentary. How do you reach a broad audience that might not have a deep grounding in the topic, while still providing substance to viewers who want to go deeper? It's a question that comes up constantly in the script-writing stage, and anyone who's done documentary work knows that plenty of good reporting and footage end up on the proverbial cutting room floor.

Yet using the web as a primary distribution platform poses an important question: doesn't the linked and nonlinear nature of the Internet give usthe opportunity to create an experience that can serve the casual viewer as well as the power user? Well, yes and no – traditionally we've used chapterization, podcasts and other tactics to provide more entry points into long video narratives. But in the end they remain primarily a box with a play button and not much more.

Recently, though, the Mozilla Foundation's "Web Made Movies" project has been inspiring developers to think about ways, as they put it, "to make video and the Web play nicer together." The result has been a new javascript codebase called "Popcorn," that provides an API for connecting cue points in a video (or videos) to events on a web page. By "events," we mean, opening a map, showing a list of tweets, a slide show, and many other things. Moreover, Mozilla is at work on an authoring tool, called "Popcorn Maker," that will provide a WYSIWYG environment for enriching your video.

About the Player

For the Rural West energy video, we opted to use Popcorn.js to add annotation capability to our video. The interface you see at work allows for the following functionalities:

• HTML-editable "lower third" titles identifiying people and places in the video
• Up to six annotations per chapter of your video, up to about five chapters in all.
• These annotations can contain text, images, video and links to additional content.
• Cross-platform, plugin-free performance on modern browsers, plus mobile phones and tablets.

Downloading the source code from GitHub

We have posted the source code on GitHub for downloading or forking (creating a new source code repository based on the original).

Documentation and Support in the Works- Sign Up for Updates

It's early yet, and we haven't had time yet to provide documentation. If you'd like to sign up to hear from us when we've added documentation, instructions and refined the code, please add your name to the form below.

And if you have any questions or comments, don't hesitate to contact me at Geoff (dot) McGhee (at) Stanford.edu.

Thanks!

Last modified Wed, 2 May, 2012 at 11:51