The site is now run on Octopress, a static blog/site generator. I can write all pages and blog posts in Markdown as a text file on my computer. The whole site is regenerated once for each change and uploaded to the web server. Wordpress dynamically generates for every single page view, which seems unnecessary, especially given how rarely I update the site. And perhaps because Octopress is simpler and newer, most of the available themes are written with minimal script and CSS resources, loaded as late as possible.

View the prototype here. It should work in any modern web browser that handles html video (even Internet Explorer 9!). Below, I’ll discuss the challenges and solutions we discovered through the process of building a prototype that tells a story as well as it demonstrates the technology.

The goal of the prototype was to give an overall sense of the subject while giving a viewer the opportunity to “drill down” to additional media for more detail. As powerful as HTML video and Popcorn are, it’s easy to overwhelm the viewer with too much information. So we had to choose the content and design the layout and interaction to tell the story while making it beautiful and avoiding distraction.

Content

Yasmin decided to highlight a conflict at the Qasr al-Nil Bridge, near Tahrir Square in Cairo. To best tell this particular story, we chose to use types of additional media, each implemented as Popcorn plugin. Relevant additional photos and video would give a deeper emotional and expository experience. Since most of our audience might not be familiar with the details of the place, we added pop-up facts, which can be expanded by hovering the mouse. Finally, a simple link appears in the lower left corner crediting the original source of the main video clip.

We considered adding a Google Map, since Popcorn has a plugin that will move the map to specified locations at any point in the video. But the Tahrir Square protests all took place around too small a space to make a moving map useful, and the source videos didn’t contain accurate enough location metadata to pinpoint specific enough locations around the square.

For the main video, Yasmin chose three short video clips, around 30 seconds each. All the clips are from a distance and give a visual overview of the event. The detail video and photos are all either closer shots or much longer, appropriate to the higher level of engagement the viewer will demonstrate by clicking to activate them.

Design

We wanted to focus more on the story than the technology and to preserve the artistic aspects of film, so it was important to make the prototype as artful as possible. Since neither of us are graphic artists, we decided to keep it as simple as possible. Yasmin made things easier by choosing beautifully shot video and photos. I designed the page to so that it’s entirely filled by video and minimized any extra visual flashes that might clash without the help of an additional designer. The videos of the event happened to appear a bit muted, which made them look nice when layered. For a more general and unpredictable set of images, I might consider using CSS opacity to mute certain components when others have focus.

Interaction

Finally, getting the interaction right took a bit of experimentation and problem-solving. There was a lot to explain, so we needed to have multiple pop-up tips. The best way we could think to organize them was to place them within the video, and to balance the level of interruption, we made them semi-transparent and showed only the title unless the mouse hovers over them. It would have been nice to have those move around the video frame as their subjects moved, but that’s quite a lot more work than we had time for in an afternoon.

The additional videos presented a bigger challenge, since they are seven or eight minutes long, while each is applied to a 30-second section of the main video. My initial thought was to pause the main video while a detail video was playing, but Yasmin thought it would be more cinematic to keep the main video playing in the background. The first thing we need to do is drop the volume of the main video to 10%, so it’s still in the background but not distracting. But what would happen if you’re playing through a seven-minute detail video and the main video gets to a new section? Your video would disappear. So now, when a detail video is playing, and the main video gets close to a new section, it skips back to the point when you activated the detail video and loops until you’re done. When you close that video, the main video returns to full volume and continues to play. Hopefully, the result is a cinematic experience that lets you explore the deeper aspects of the story while maintaining context.

Nuts and Bolts

There are a few technical tricks to keep in mind when building an interactive film such as this. At the time we built it, Popcorn only supported HTML video, using the

Now, Popcorn supports YouTube and Vimeo, but the native HTML video approach allows for tighter feedback and control of the timing. Splicing multiple YouTube videos in a browser could be tricky and unreliable.

Out of the box, Popcorn makes it easy to display timed content in different formats, with pretty basic Javascript skills. I was able to use the existing footnote plugin for the source credits, but I had to build custom plugins to get the positioned pop-ups and the detail videos. With Popcorn, the main video drives the timing of all the other events, so one must be careful when having the events change that main video time. Otherwise, you can end up with a loop that will make a mess of the whole thing.

Most of the rest of it can be done with Cascading Style Sheets, which handles positioning and visibility, including fades. Very soon, CSS will handle more advanced animations on all the major browsers.

Going Forward

I’m not sure what Yasmine and Jigar Mehta (her partner on 18 Days in Egypt) plan to do with the project, but we talked a bit about generating these interactive videos dynamically. Fortunately, Popcorn makes it easy to build a scene based on JSON data, which can be generated by a database. Mozilla is working on a tool that should eventually make authoring easier.

But automating the composition process would be a massive challenge, requiring precise and carefully managed metadata, which is as much a social challenge as it is a technical one. I suspect that a wiki-like community approach would work best.

Either way, this kind of interaction around video is going to take a lot of experimentation to make the technology disappear and reach the full potential of more powerful art and information.

From the Essex/Delancey station, one can take either the M train or the F train uptown to almost any station in Manhattan along this particular line. However, the trains arrive on different platforms, which are separated by a long stair case. It is impossible to observe both platforms simultaneously, and there is no automated indication of which train will arrive first and therefore reach a given destination fastest.

Commuters have devised a novel solution. Between train arrivals, passengers will cluster around the stairs separating the two platforms. As soon as there is more than one passenger, they will evenly distribute themselves along the stairs, re-calculating in O(1) time whenever a new node is added. When a train arrives on either platform, the nearest passenger, or edge node, signals the next node by glancing slightly in the direction of the rest of the passengers, and the message is similarly propagated throughout the network, allowing everyone to board the first train to arrive.

The result is an optimal, low-latency, low-overhead solution, built on existing hardware, following the primary rule of the subway: never make eye contact or speak to anyone.

And it’s a magical little reminder that New Yorkers, whatever our reputation, are good neighbors. Smart too.

With just a few hours advance notice, the Popcornjs crew put together a video/data mash-up of President Obama’s State of the Union speech for PBS, in which text analysis is displayed in time with the video. Among such a long video, with so much data, WMM leader Brett Gaylor asked if I could build in a feature making it easy to Twitter a short URL right to a point in the middle of the video. Sure I could. Unfortunately, an external service we were using to access the Twitter API broke down, so we couldn’t get the feature working in time to go live. I’ve worked around it, and here it is now.

Watch the video from the beginning or start 20 minutes in. Try the button just below the video. Read on to learn how it works.

The process is pretty simple. (I decided to use jQuery, since it was already loaded up for Popcorn.js, but it’s not necessary.) The three main steps are:

1. Check the URL for a time code and advance the video to the appropriate starting point.

2. Update the time code on the button.

3. Set up a “click” handler on the button to generate the link and open a Twitter window.

Here is the code to get the video started at the right place:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* get the <video> element. Don't use jQuery here because it doesn't expose video properties and methods */
var video = document.getElementById('video');

/* advance video and auto-play */
var startVideo = function() {
    if (targetTime < video.duration) {
        video.currentTime = targetTime;
        video.play();
    }
};

/* parse URL hash after # for a number */
var targetTime = window.location.hash.substr(1);
targetTime = parseFloat(targetTime);
if (!isNaN(targetTime) && targetTime > 0) {
    if (video.readyState >= 3) {
        startVideo();
    } else {
        $('#video').bind('loadedmetadata', startVideo);
    }
}

The information we need here is how far into the video we want to stop. To keep it simple, we’re just looking for a floating point number to represent seconds. Since all this processing is happening in the browser and I don’t have access to the server anyway, we put the number in the “hash”, which is the part after the # symbol.

After checking to make sure we have a positive number, we test if the video is loaded, since we don’t always know the order in which our media and scripts will be loaded. If the video is already loaded, start up the video right away. Otherwise, bind our function to the “loadedmetadata” event so the browser will get back to us when it’s ready to start the video. By using an event handler, we don’t have to set a timeout to keep checking every few milliseconds. (Though I’ve been told “loadmetadata” can be slow to fire, so some people use a timeout, even though it’s ugly.) Once the metadata has loaded, we can find out how long the video is to make sure we’re not fast-forwarding past the end, and then it’s simple to set the time and start playing.

Next, update the time code on our button. (It’s not actually a button, just a div, but it works anyway.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$('#video').bind('timeupdate', function(event) {
    var time = this.currentTime;
    if (time < 0) {
        time = 0;
    }

    var mins = Math.floor(time/60,10);
    var secs = Math.floor(time - mins*60);
    var hours = Math.floor(mins/60,10);
    secs = (secs > 9 ? secs : '0' + secs);

    if (hours > 0) {
        mins = mins % 60;
        mins = (mins > 9 ? mins : '0' + mins);
        $("#tweet-time").html('Tweet to ' + hours + ':' + mins + ':' + secs);
    } else {
        $("#tweet-time").html('Tweet to ' + mins + ':' + secs);
    }
});

This feature is not absolutely necessary to make this work, but it’s helpful to tell the user exactly how far into the video we’re linking and indicate that the button action is time-sensitive. The “timeupdate” event fires a few times a second, whether we’re playing or scrubbing the video, forward or reverse. Javascript doesn’t provide an easy way to make a string showing elapsed time from seconds, so we do it ourselves. jQuery makes it easy to change the text.

One problem with this code is that the button changes width as the time changes. Ideally, you’d probably check the duration of the video once at the beginning to determine whether you’re ever going to need the hours, and pick a fixed-width font.

Finally, set up the “click” event to create the link and pass it to Twitter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var base = window.location.protocol + '//' + window.location.host + window.location.pathname;
$("#tweet-time").click(function() {
    var time = video.currentTime;
    if (time < 0) {
        time = 0;
    }

    var height = screen.height;
    var width = screen.width;

    window.open('http://twitter.com/share?count=none&counturl;=' +
        encodeURIComponent(base) + '&text;=&url;=' + encodeURIComponent(base + '#' + time),
        'tweet-time-sotu', "left=" + Math.round((width/2)-(550/2)) +
        ",top=" + Math.round((height/2)-(450/2)) +
        ",width=550,height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1");
});

The most important point here is creating the URL to pass along to Twitter (“base + ‘#’ + time”). One thing we need to be very careful about is that most Twitter clients parse everything after “#” as a hashtag, separate from the URL. The solution is to use a [URL shortener, which is handy for hiding the “#” symbol as well as saving us characters out of the allowed 140. Originally, I used the is.gd API for this (we need a different short URL for every timecode someone uses). This worked well enough, but it required an extra call out to the network, which made things crawl on a slow connection.

Fortunately, Twitter provides a nice, clean sharing tool that will create a short URL for us. (This page explains how to use it.) We just have to make sure to wrap our target URL in encodeURIComponent so the “#” gets escaped, otherwise everything after it won’t make it to the server. Normally, I hate using pop-up windows, but Twitter was pulling some kind of referrer-checking shenanigans, giving me a “Forbidden” server error when I tried to load this page inside an