Mozilla Drumbeat Festival: Open Video Lab

Last week I was in Barcelona, Spain for the Mozilla Foundation's Drumbeat Festival.  The festival's theme was Learning, Freedom, and the Web, and attendees came to participate in sessions and workshops on a variety of education, open source, and open web topics.  Together with Mozilla's Brett Gaylor, I ran the Open Video Lab.

Our goals for the Open Video Lab were simple to state, harder to guarantee: show people what you can do with HTML5 and <video>, <canvas>, <audio>, CSS3, etc.; link film people with developers with storytellers with designers with educators; and to, as Mark Surman is fond of saying, "help people build cool shit using the open web." Thanks to the amazing people who came to the festival, we did all that and more.

One of the attendees, Liz Castro, did a great job blogging about what was happening during day 1 and day 2 (Gabriel Shalom also has a great post here), so I'll point you to her posts, and focus what I want to say on the people who came, and the things we built.

For Brett and myself, the single hardest part of preparing for this event was the fact that we didn't know who would come.  It's hard to program two days of content when you don't know the make-up of your group, their interests, and backgrounds.  Further, we didn't know if people would only want to come for an hour and then leave to attend other sessions, or stick it out with us and stay to build things.

In the first session we had a packed room, and were met with professors, filmmakers, web developers, designers, producers, students, translators, writers, artists, etc.  It was a fantastic group, and had all the energy and diversity we needed to actually build some things.  Also, there was a core of people who were determined to stay and see things get finished.

On the first day Brett shot a really quick video getting various people in the square to say where they were from.  Nicholas Reville then took the video and had people translate and subtitle it into 17 languages using the Universal Subtitles project.  Next we built a simple Google Maps tool to allow us to extract longitude and latitude info so we could get geo-data for all the speakers.  Finally we put it altogether using Popcorn.js to create a mash-up of the video, Google Maps, and Wikipedia pages (video of demo here).

After we'd built an example open web video demo together, it was time to think about what we might build on the Friday.  We started brainstorming, and the group broke into three main sub-groups, each discussing:

  • how to embed and automatically display metadata about videos
  • what sorts of tools are lacking for content creators
  • how to create more beautiful, artistic web video demos and films
    Mozilla Firefox's Creative Lead, Aza Raskin, then came and gave a talk to the group on how to effectively create prototypes (video, slides, and demo from the talk are here).  The room was so packed that Brett and I literally got pushed out the door so they could handle the overflow.  It was a timely topic for our group, who were starting to talk about how we should build a "platform."  The point we picked-up on in the next hour was one that Aza underscored in his talk: if you can't build your prototype in a day, you need to keep cutting until you can.  Our group only had one more day, and we want to take advantage of all the talent available to us.

After much debate and discussion, we agreed to take on two projects: 1) make a film about the future of education using the open web; and 2) make it possible for librarians, archivists, and other metadata people to have their bibliographic metadata reveal itself to users in <video>.

The next day we spent an entire day building things together.  The metadata team worked with JavaScript, RDFa and Dublin Core data, and built a custom overlay UI to make it possible to see info like the video's title, creator, date, etc.  Meanwhile, the second group took advantage of the incredible set of educational experts on-hand at the festival to conduct interviews on the future of education.  This being Europe, they shot five interviews, each in a different language (French, Catalan, German, Italian, English).  They then had these translated to English, and wrote the subtitles.  The rest of the group figured out how to get flickr and twitter content to mix with the video, and worked with the designers on an overall aesthetic.

It was an amazing feeling to work in the lab that day.  Everyone was engaged and valuable--not one of us able to do everything that had to get done.  Our main goal had been to give the attendees an authentic experience of working on and with the open web, and doing so in a highly collaborative way.  This was exactly what happened, and it was a thrill to be part of it.  As we ran to the final keynote to present our projects, one of the filmmakers said to me, "So this can't end today, we have to do more of this."  A lot of us had that feeling.

Here are the two things we made.  The first is the metadata demo, showing a prototype of a web-based metadata parser and video overlay UI for video bibliographic information (video demo here).  If you hover your mouse over the video, a small 'i' will appear in the lower-right.  Clicking it brings up the metadata (title, creator, date, license), which is copy-pastable text.  For reasons we didn't have time to fix, it doesn't work in Firefox 3.6, but does in Firefox 4 Beta/Nightly, Chrome, etc.  It would be good to grow this out to a proper JS lib, and extend it to work for Images too.

The second is our so-called Web Made Movie on the Future of Education (video of demo here).  It has web-based subtitles, uses the #futureofeducation twitter hashtag, and #drumbeat flickr hashtag.  It still amazes me that it was all done in one day (before 6:00 pm!), and I think it captures so much of what was going on at the festival: educators, artists, hackers from all walks of life coming together to share, learn, and build.

Photo Credits: Samuel Huron on