Last month, I participated in an all-day workshop that Mozilla organized as part of Web Made Movies to introduce filmmakers to the possibilities of interactive video using Popcorn.js. I lobbied to be paired with Yasmine Elayat to create a prototype for her project, 18 Days in Egypt, an interactive documentary covering the recent revolution in Egypt, using citizen-produced video. It’s a credit to Yasmine’s knowledge of the material and the work of the Popcorn.js team that we were able to build and demo the whole thing in a single day.
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. Read the rest of this entry »
Recently, I’ve been doing some work with Mozilla around their Web Made Movies project. They’ve been experimenting with the integration of video and the Web enabled by the multimedia features available in modern browser and building tools like Popcorn.js. As we’re starting to take some of those projects out of the lab and into the real world, it’s been interesting to see how those tools hold up and what features are inspired by these situations.
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.
Here’s another demo. This time I’m showing off HTML5 video with a pair of videos by the band Ok Go.
Ok Go made the video for “White Knuckles” all in one shot and by all accounts it wasn’t easy. Thankfully, they also posted an extensive video showing how they did it. The video shows the complex choreography from different angles, edited together in time with the final result. I thought the best way to appreciate the entire process would be to see them side by side.
The new-ish video features of HTML5 allow Javascript code enough control over embedded videos to get two of them playing in sync. Otherwise, they work just like images, so it’s easy enough to stretch and move them around. No plugins (Flash, Silverlight, etc.) are required, and it should work in Firefox, Chrome, Safari(?) and maybe Internet Explorer 9. But no iPhones, iPads or Androids. Your mileage may vary, especially on slow connections where the videos don’t load up quickly.
The approach is not perfect, as seeking around the videos will likely cause synchronization to go off a bit, even on the latest beta versions of both Firefox and Chrome. I’ve written some tricky and maybe even ugly code to try to minimize this problem, but it’s not perfect. The standard event model for the media controllers doesn’t offer quite as much control as I’d like, and the way the browsers load video asynchronously seems to make solving this problem impossible. If anyone has any thoughts or suggestions, please comment.
It’s been nice to see an increased awareness in the media community over the last few years of the opportunities to engage audiences on the Internet. There is a new batch of technologies becoming available that should enhance the kind of experiences, allowing for a level of interactivity and visual expressiveness that could match or rival the films themselves. I’ve been experimenting with some of these, and I wanted to share the results.
Among my favorite of these is the cluster of technologies around HTML5, including CSS3, WebSockets, faster Javascript and especially WebGL. WebGL is a powerful graphics library (analogous to OpenGL) that will give web developers access to hardware graphics acceleration in the browser, standard and without any plugins. Here is a demo I put together using WebGL to map audience demand data on the web to a 3D representation of the Earth.
This is just a prototype, and there’s a lot of room for improvement in performance, aesthetics and interactivity, but I think it shows the potential of what’s possible. The graphics are beyond what we’ve generally seen on the web before, and it’s combined with the kind of portable data that has been spreading around the web for the last few years. I’ll try to clean up the code and get a live demo online soon.
For now, WebGL is only available in Beta versions of Firefox and Chrome (and maybe Safari?). They’re worth downloading early if you’ve got the guts for the occasional bug, and they’ll hopefully be released in the next few months. If you want to take a shot at developing with WebGL yourself, there are great lessons at Learning WebGL and at Mozilla.
I’ve got lots more demos coming, and they’re cooler than this one, so check back for more in the next week or so. I’ll be posting them on YouTube and on Twitter.
