Drumbeat Barcelona - Open Video Lab - Day 1

Thanks to @pdavenne and @cataspanglish and their Barcelona Social Media camp, I happened to meet hear Enric Senabre (@esenabre) give a talk on Mozilla's Drumbeat Festival, held this week in Barcelona. Drumbeat is the Mozilla's foundation to go beyond an open source browser and try to find other parts of life that can be enhanced with open source software. The theme of this week's festival is open education and how to facilitate it with open source software. There are 400 attendees, about 75% of which are from out of the country.

Which means I spent the day in San Francisco, practically, complete with a talk by Aza Raskin, but I'll get to that. It was pretty surreal being surrounded by Americans and English speaking Europeans right in the center of Barcelona.

I opted to spend the day in the Open Video Lab. I wasn't quite sure what that was going to mean, and I think a lot of the people, including the organizers, Brett Gaylor, Dave Humphreys and Ben Moskowitz might not have either. That didn't stop them from skillfully guiding and coaching the group to figure out some hands-on projects to work on.

First, they had us go around the room explaining where we came from and what we were working on. There were a fair number of video producers, web designers, educators, and also some coders. I jotted down a few of the topics that people were either working on or interested in: subtitling videos, teaching digital video, knowledge mapping, video production with minority youth, putting videos online, linking existing metadata with video, management consulting, teaching with video, designing and developing video, screen casting, mixing video with education, producing documentaries, video literacy, jplayer javascript library, media studies, documenting systems, figuring out how things relate, web video projects.

They/We came from the UK, Germany, Minnesota, Barcelona, France, Brazil, Galicia, and Madrid, to name just a few.

Brett and Dave began the workshop by asking us "what is possible with open video" and then showing us a few demos that took advantage of HTML5. There was a page with a video of a whale with an overlaid canvas element that mapped the audio to a visual representation. There was a kung fu video that used the browser to add a shading effect in real time. There were even video games, that mixed 3d, Flickr, Twitter, and rendered right in the browser.

Then they talked about popcorn.js, a Javascript library that Brett (I think) and a crew of students from Canada put together in a week to deal with video with HTML5. They showed us a sample that they had created that day with a video from Drumbeat conference attendees saying where they were from, superimposed on a window that was half Google Maps, half Wikipedia entry for that location.

Then Wendy from Bay Area Video Coalition showed us some of the videos that they're producing, with an eye towards promoting social justice.

Ben Moskowitz showed us a demo of MediaThread, a project at Columbia that allows professors and students to reference, annotate, and cite videos available through YouTube or other sources. It looked really valuable. The code is open-source, but the working project is unfortunately available only to folks associated with Columbia University.

Ben also showed us Pad.ma, an Indian site that catalogs videos with all sorts of different kinds of metadata, including name, title, keywords, and words in the transcript, and then lets visitors search through the metadata for particular videos.

Then it was time for the hands-on section. They showed us the example they had pulled together that morning, referenced above, using the popcorn.js library.

But before we got to the code itself, we talked a little about codecs and video editing tools. There was general consensus that despite the existence of some tools, none really offered the same capabilities as Final Cut.

As for codecs, Ben told us that Theora and webM were both open-source, as opposed to the most prevalent codec, H.264, which required paying licensing fees. He said that in about a year we would all be using webM, a standard developed by Google from vp8, and for which Google had paid the licensing fees for everyone (could that be right?), but that it was not yet well supported, and so recommended using Theora, at least for now.

Theora, though, doesn't work in Safari, so you really have to make more than one video source file available in order to be compatible with Apple-based browsers (including on the iPad).

Then he showed us the HTML5 video tag:

<video id="video" src="..." controls data-timeline-sources="locations.xml">

He said you could use HTML and CSS to format the controls, or use the controls attribute. And that attributes that begin with data- are recognized as extensions to HTML5 and thus will not keep the document from validating.  It works because of the popscript.js script being called. He unfortunately did not get to showing us the locations.xml tag.

He then quickly showed us a little tool that he said he had written in a few hours to gather latitude and longitude coordinates from Google Maps that he could then feed into the mashup.

But then we broke up into small groups and we didn't delve further into the code. I hope we get there tomorrow.

In our breakout group, we talked about metadata, and also touched on individuals' particular issues.

We talked about how there are two different classes of metadata... what I like to call formal (dublin core structured) and informal (tags, keywords, made up by individuals), and how they have different purposes (the former for finding the video itself, the latter for pinpointing bits within the video).

Meanwhile, Dave kept helping us focus in on a particular problem... and we decided it was how to expose existing metadata that was already related to a video. There were a few people who had libraries of video as well as XML structured metadata and wanted to be able to overlay the metadata on the video so that the metadata was revealed in the browser.

The other breakout groups came back, and my very shorthand summaries of what they found were:

Students using video to learn, then go back and watch themselves is different than producing video itself (meta-cognitive)

Need one place to put all files, design matters, generational issue

Tools: learner and teacher tools not necessarily the same

Destroy those boundaries, teacher proposes, students remix and turn on head; said another way: teacher create lesson plan, students mess with it

Then we were treated to this great presentation by Aza Raskin on Prototyping.

How to think about Prototyping and why
Hardest part about software development is the people, convincing them to make something
Must build first 100 miles (prototype), then build resort at end (inspiration)
Value of idea is 0
Unless communicated
You want project to be touchable and feelable
Idea < writeup < mockups < prototype < video
Firefox Panorama, organizing tasks spatiallly
Goal of prototyping is to convince yourself of the idea
   0 You will be wrong first time
   1 Complete prototype in a single day
   2 Make a touchable sketch (don't do everything)
   3 Tight feedback loop (dogfood?!)
   4 iterating solution helps illuminate problem
   5 treat code as throwaway, be ready to refactor
   6 steal design, make beautiful

jqueryfordesigners.com

Pitch your prototype
How does it make THEIR life better?
Be dramatic.

Example: Twitter streamer

And then I went back out into Barcelona!