Prior to HTML5, web video lived exclusively inside browser plug-ins
techniques for interacting with the rest of the surrounding document.
Mozilla's Popcorn project is an
effort to reverse this, by building an event-driven API to hook
<video> content in to other page elements and local browser
makes videos fully-interactive HTML elements, so that the timeline can both
trigger and listen for events. Mozilla declared
that the core Popcorn.js library
had reached version 1.0 on November 4, and rolled out a set of auxiliary libraries to simplify authorship and to tie videos in to popular web services.
The cornerstone of the Popcorn project is HTML5's HTMLMediaElement
(which, despite the heavy emphasis on video, is applicable to audio content
as well). In particular, Popcorn relies on the currentTime
attribute, which reports the position in the element's timeline. By
wrapping a <video> or <audio> element in a
Popcorn instance, the page developer can add, remove, and alter the other
elements of the Document Object Model (DOM) based on the playback position of the media.
The simplest example is a subtitle track, which is a series of text
fragments to be displayed and removed at particular moments in the
timeline. But Popcorn builds a more flexible framework on top of
HTMLMediaElement, so that developers can trigger custom functions, respond
to events, and manipulate the playback of the media itself (such as jumping
to particular time codes, pausing/unpausing playback, or changing the
playback rate or volume). The code is modular, with base functionality
provided in Popcorn.js, and separate "plugins" (arguably a poor choice of
terminology, since Mozilla uses the nearly identical term "plug-in" to refer to media-enabling browser add-ons as well) for common use-cases and to link in to particular third-party web services. There are plugins for accessing Twitter, Flickr, and OpenStreetMap, to name just a few.
Apart from simple time-based triggers, you can use Popcorn.listen(event,callback_function) to bind the callback function to a specified event. Built-in events are provided to handle typical web playback scenarios, such as "play," "pause," "loadstart," "stalled," "volumechange," and so on, or you can define custom events. You can directly trigger an event with Popcorn.trigger(event[,data]), where the data parameter allows you to send a data object to the listener.
The core API also defines pass-through methods for querying and setting basic properties of the media player (the state of the playback controls, the percentage of the media that is buffered, etc.), plus parsers for ancillary formats(including JSON, XML, and external video subtitle tracks), and static methods for utility operations like fetching remote scripts or getting locale and language information from the browser. Popcorn is designed primarily to work with native HTML5 media elements, but the library supports add-in "player" modules to implement compatibility for participating third-party video services, too. As of now there are just two, YouTube and Vimeo, plus a "null player"-like object called Baseplayer, which allows you to bind listeners and trigger events with a timeline that has no media attached.
Although a handful of the existing 1.0 plugins implement utility functions, most are designed to simplify typical interactive tasks needed by video publishers. For example, the subtitle plugin allows you to define subtitles as a straightforward
text: "Share your pain with me... and gain strength from the sharing.",
rather than writing text to a page element in separate .exec()
Interestingly enough, some of these plugins are extremely similar — for instance, the footnote plugin also permits you to render text onto an HTML element, with a specified start and end time; the only difference appears to be that subtitle does not require a target element, and will render the text over the video element if none is provided. Mozilla has been developing Popcorn for well over a year, so presumably the initial set of plugins reflects the input of at least part of the web video community. There are plugins designed to implement bottom-of-the-video "news crawls," to tag people (complete with an avatar and link to a profile page), to list citation and attribution information. For the latter case, imagine a political ad and the brief citations that pop on screen as the damaging quotes about the candidate's opponent are read.
These plugins enable you to display and hide everything from "like"
boxes and profiles to maps and Twitter searches. Whether or not any
particular plugin seems useful is probably in the eye of the beholder and
is likely to be dependent on the API of the service involved.
There are examples elsewhere in the Popcorn site where automatically
bringing up informational content at the appropriate time really does seem
to enhance a video — showing a map of the location being discussed,
or related images and real-time Twitter commentary on the subject. On the
other hand, simply popping up a static web page does not sound particularly
That distinction may be too fine a detail to get across; I suspect that ultimately, if Popcorn takes off, non-developers will look for a tool that handles both video editing and designing the interactivity to accompany it in-page. After all, once you start thinking about tying interactive content into your final work, it will start affecting the way you edit. Of course, aside from the demo films linked to from the project's site, virtually no one has attempted something similar to Popcorn, but you can already see how designing a video with web interactivity in mind affects the final product. The flashiest example of Popcorn is without question One Millionth Tower, a documentary project that incorporates captioning, layered video, and even animation. The end result is far more than just a video that triggers the display of page events.
As a 1.0 release, Popcorn is complete enough for people to begin
designing their own interactive content. The supported third-party
services cover the basics, and the home page links to a few other
still-in-development add-on projects. The project certainly offers a
compelling picture of what DOM-interactive audio/video content can do. Now
if we can just get the video codec disputes solved once and for all....
to post comments)