|
|
|
Posted
over 2 years
ago
by
This past week, I was fortunate to be part of a great collaboration between Mozilla and the PBS Newshour team, creating an annotated version of Barack Obama’s State of The Union Speech using popcorn.js. While the demo itself is fairly humble, its
... [More]
actually quite an accomplishment given that we had only met the Newsroom staff the day of the speech during a meeting at the Corporation For Public Broadcasting. I think the Newshour team experienced the power of the open web first hand - a talented group of developers were able to collaborate quickly and produce something of high quality (not unlike a tv newsroom). So much so that we’ve begun a conversation on PBS to use popcorn.js in all of their future analysis.
The whole experience was a great example of the kind of innovation that we’re trying to foster with Web Made Movies: video producers come up with new use cases for technology , and the resulting code is put in a repository for future use. It’s proof that web video is an engine for innovation and HTML5 is a great space to be exploring.
David Humphrey and PBS Newshour recently blogged about their experiences. I thought I’d provide a blow by blow.
January 25th, 2011
Washington, DC: Ben Moskowitz, Nicholas Reville, Geoffrey MacDougall and myself are pacing around a presentation room at the Corporation for Public Broadcasting. We’ve come to express why we think there is natural alignment between public media and the open web.
10:00
A little bleary from travel, a previous day of meetings, and bad breakfast joint coffee, we meet a room full of people involved in American public media - PBS affiliate stations, the PBS Newshour team, National Public Radio, and others.
We had created some demos over the previous 2 weeks - including this popcorn treatment of a PBS Newshour piece on Hait (only the first several minutes are annotated). We also experimented with the WGBH Open Vault, creating a parser for their metadata schema that would translate into popcorn data (due to mp4 video, works only in webkit browsers. Ben and his cousin created this example video report, based on lesson plans in the PBS Newshour piece on Haiti. Nicholas at PCF also showed the results of a translation party that Universal Subtitles had hosted with PBS Newshour.
We felt the presentation went well - the room was definitely thinking about the possibilities present in popcorn, and immediately grasped the advantage of adopting Universal Subtitles.
11:30
After the speech, PBS Newshour correspondent Hari Sreenivasan remarked how they wished they had it for the State of The Union address. “Isn’t that tonight? Someone asked” Hari nods. A wireframe is sketched out.
3:00
We’re with Travis Daub, the Newshour’s digital producer. He’s on the phone getting the run down on when the video of the president’s speech will be on Youtube. He says midnight, and analysis will come in throughout the evening These news people stay up all night, too!
We hop on the popcorn irc channel (link). I ask David Humphrey at CDOT if he is up for bringing popcorn.js to the State of The Union. He laughs, of course he is. He asks if Anna Sobiepanek and Scott Downe who are co-op students at Seneca if they are in - you bet. Rick Waldron, a javascript ninja at Bocoup picks up on what is happening and starts writing code immediately based on the spec. Ben Moskowitz and I rush to keep up, posting wireframes, and communicating with Dean Jensen at PCF / Universal Subtitles who is co-ordinating the transcript that will be instumental in timing the analysis. Travis logs into IRC from his iphone in a cab.
7:00
Robert Bole for the Corporation for Public Broadcasting orders some Chinese food.
9:00
75% of the code necessary to convert PBS’ annotation system to popcorn. The wireframes are posted. Its gonna pull in twitter, have chapter selectors, wash your car, and email Obama. This is going to be easy. Lets watch the speech.
10:30
Travis starts uploading the video.
11:00
Snag. The encoded video doesn’t have audio. Travis will have to start again, and do it twice for browser compatability. Ouch. The video is so long that the encoding process is painful.
11:15
New snag. Servers seem to be failing.
1:00
Multiple snags. Grumpiness sets in. Travis valiantly posting new versions. Popcorn hackers have the analysis working with a dummy video - just waiting for the pieces to come together.
3:00
The pieces are not coming together. The night is called.
The next day
A snow storm, a train travel, multiple taxis and subways, a hamburger at a breakfast spot - next thing you know its midnight again. Is it working yet? No, it is not. Inconsistencies in the transcript. Hotel Wifi killing us. Must sleep.
With a final push, and additional work in the morning, the bugs are ironed out. Vanessa Dennis at PBS Newshour adds styling and pushes to their blog on the front page. My favourite quote from theirblog:
“The Web is changing, and we at the PBS Newshour are changing with it through experiments like these.”
Experiments like these can be exhausting, but the thing I love about working with Mozilla is that we make change by building things. It feels great that Web Made Movies is really starting to accomplish this.
WebMadeMovies [Less]
|
|
Posted
over 2 years
ago
by
I’m very excited! I was just sent some very cool wireframes from Al Macdonald (aka F1LT3R), developer extraordinaire at Bocoup. He and others at the Boston-based Javascript house are in full stride working on the next release of popcorn.js and
... [More]
the first release of the Graphical User Interface for developing popcorn pages that we like to call Butter.
The goal for butter is that anyone with a video anywhere on the web can build HTML5 video pages that incorporate other elements of the web – allowing non-developers to create what my fellow Mozillian Tristan Nitot has dubbed “Hypervideo”.
In the new version of popcorn (its only version 0.2, so still a ways to go), we are moving all of the functionality from the previous version into plugins. This is a timely step towards a more open infrastructure that will allow any developer to write a plugin that will work with popcorn.js, and then by extension, Butter. So while the first plugins we have developed are for popular sites and services such as twitter, flickr and wikipedia, now anyone can create a plugin to support identica, open street maps, or whatever new thing the web churns out tomorrow. We have big plans for butter, and as we progress towards a 1.0 release in 2011 there will be much more functionality.
Check out our evolving project scope on our etherpad.
We have a goal for popcorn to be part of an open media ecosystem – a great web app and development platform that creators can add to the growing list of HTML5 tools that are available to them. We’ve been very inspired by projects like processing.js and Universal Subtitles that illustrate the advantages of federated and collaborative systems for creating culture that is truly OF the web. We are very early in that process and of course could use all the help we can get!
One of our next goals is to make it more clear how contributors can get involved – the best page for this is at www.webmademovies.org, where you can join our mailing list, talk in IRC or pick up a bug on our Lighthouse issue tracker.
On a personal note, this has been a great learning experience for me, as I’ve seen the power of the open web play out in realtime – a seed of an idea (what if a video could trigger events in a web page?) gets a proof of concept demo, which is turned into a library, which is now being turned into a product that we hope a lot of people will get behind. It’s been inspiring to see students from Seneca College working side by side with seasoned professionals towards a goal that will benefit the web, and makes me happy to be part of Mozilla.
Please stay tuned, and also check out Bocoup’s post on the subject, as well as Scott Downe’s recap of the experience from his end at Seneca, as well as Anna Sobiepanek’s thoughts on the refactoring for 0.2. We’re planning a release just in time for Christmas!
WebMadeMovies [Less]
|
|
Posted
over 2 years
ago
by
Last week, in collaboration with David Humphrey, I ran the Video Lab at the Mozilla Drumbeat festival in Barcelona. I’m still recovering, so this post is a bit late, but a week has actually given me some perspective on why events like this are
... [More]
necessary crucibles for innovation.
Everything we’ve achieved so far within the Web Made Movies project has been the result of intense collaboration over a short period of time. The popcorn.js library was created in a span of only two weeks, with half of this time devoted to creating our first demo (screen capture embedded below).
The forcing function of this demo was the Mozilla Summit - a gathering of the entire Mozilla community in Whistler, BC. It really opened my eyes to the degree to which demos drive the developer community - showing our demo at the summit was the moment we moved from “hand waving arty types” to “people actually trying to do something” in the eyes of the developers in the room. This will be crucial as we begin to move from “demo or die” mode towards shipping software.
Our next event was the Open Video Conference in New York. In the run up to this event, we knew that we were meeting with folks from the Public Broadcasting community in the US, so we wanted to show how open video technologies have a competitive advantage in that they can be quickly iterated upon. So Scott Downe and Anna Sobiepanek created two quick demos - one of a test integration between popcorn.js and Universal Subtitles (video below), and Lev Feels Fine, a an experiment in data-driven narrative.
In the run up to the Barcelona event, we knew we needed to think about how the open video tools we were developing could be used in education. I knew that Mark Surman’s son Tristan made video tutorials for video games, so I asked him and Mark for a “video book report” around a novel he was currently reading, and then we layered popcorn.js on top of his video - see the results. It was a great penny-drop for many people, illustrating how the web could be a canvas for students to create their own multi-media essays and reports.
When David and I arrived in Barcelona, we knew we’d have to show something on the first day to get people thinking. So we recorded some video of the people who we’d shared a “space wranglers” meeting with in Plaza del Ángel and asked them where they were from. David went back to his hotel to recover from jet lag, but hacked together a demo that mashed the video with Google Maps and Wikipedia (video version below).
Popcorn.js Demo: Google Maps API and Wikipedia from David Humphrey on Vimeo.
Our mission was to create something while in Barcelona - a lofty goal for these types of events, and one that depended on a delicate mix of developers, filmmakers, designers and educators showing up. As luck would have it, they did!
Over our first day we had an overview of HTML5 video technologies, and split into several breakout groups to brainstorm what we could build in our second day. We also had a visit from Aza Raskin, the creative lead for Firefox at the Mozilla Corporation, who did a talk he called “How to prototype and influence people”. It was fun and drew a pretty big crowd. The talk is below, and was picked up by BoingBoing after the conference, which was fun.
Rapid Prototyping with Aza Raskin from Dan Braghis on Vimeo.
So after some facilitation, it was decided that we would work on two projects: A meta-data demo that overlays Dublin Core data on to videos (requires Firefox 4 beta or nighties), the creation of which was certainly influenced by the fact that so many librarians and academics at the conference were expressing the lack of tools like this.
Our second creation was a short web made movie exploring the Future Of Education. The video was shot before lunch, edited, then layered with the twitter hashtag #futureofeducation (which didn’t exist the day before), and javcascript and css was hacked to overlay images from the evolving #drumbeat flickr hashtag. It isn’t exactly what everyone imagined (when does that ever happen anyway?), but remains a great outcome and a compelling piece of content by any standard.
Drumbeat “Future of Education” Demo from David Humphrey on Vimeo.
I know both projects will continue to be improved by this talented group that came together to hack, create, play and collaborate.
And as far as forcing functions, for me it has reinforced a need to improve the popcorn.js library, to create documentation, more demos, better code, to not loose sight of the artistic component of our project, and to have more events like these. The event has encouraged me to publish more, to find new collaborators, to advance the state of Open Source Cinema, to develop new forms and new languages, and to follow through on the promise of Web Made Movies - to bring developers and filmmakers together in a collaborative environment. Stay tuned for our next forcing function: 2011.
WebMadeMovies [Less]
|
|
Posted
almost 3 years
ago
by
Brett Gaylor
In creating our first demo for popcorn, we gathered footage from projects like Grassrootsmapping.org and The Village Telco to create the final video. However, we only used small snippets, so I took some time to edit down longer versions of each.
Grass Roots Mapping
WebMadeMovies
read more
|
|
Posted
almost 3 years
ago
by
Brett Gaylor
The finishing touches are now ready on our demo of Popcorn.js. This demo brings in multiple data feeds from the APIs of Google News, Wikipedia, Twitter, and flickr. It also provides automatic machine translation from Google Translate, and
... [More]
attribution data from Creative Commons.
Check out the demo here!
You can see a small video explanation of the demo here:
WebMadeMovies
read more [Less]
|
|
Posted
almost 3 years
ago
by
Brett Gaylor
WebMadeMovies
|
|
Posted
almost 3 years
ago
by
Brett Gaylor
To access the Popcorn.js library and demo files: Our demo can be found here: http://matrix.senecac.on.ca/~dhhodgin/video/index.html the Project management and tickets for the project are
... [More]
handled by Lighthouse:
https://processing-js.lighthouseapp.com/projects/52212/home
The repository is on Github:
http://wiki.github.com/annasob/popcorn-js/
We're on IRC at:
irc.mozilla.org/popcorn
WebMadeMovies [Less]
|
|
Posted
about 3 years
ago
by
Brett Gaylor
Hi! Web Made Movies wants to tell the stories of the web by the people of the web. That's why the brainstorming stage is so important for us early on. Big thanks to everyone who has submitted great story suggestions so far - they've
... [More]
really helped and episodes are being developed right now based on those suggestions.
We always need more, though, so we've launched an ideascale site that helps us centralize our brainstorming and allows people to vote up the best ideas.
http://webmademovies.ideascale.com/
WebMadeMovies
read more [Less]
|
|
Posted
about 3 years
ago
by
lsblakk
Last night I attended the Anita Borg Women of Vision dinner and before each award recipient came up to accept there was a brief video introduction that outlined their past and current contributions to technology. They all followed the formula of
... [More]
being images manipulated with transition effects while a voice over described the woman's accomplishments. It was inspiring to see these videos and it made me think that everyone should have a video like that about themselves.
WebMadeMovies
read more [Less]
|
|
Posted
about 3 years
ago
by
dilsayar
Open Source projects have enhanced our internet experience and brought innovations. Some of these projects have had a big impact on the way we use the web. My favorite open source projects are Firefox and Wikipedia which are both great. If we are to
... [More]
start making documentaries about open source, it will be nice to create two documentaries about these projects. Of course these are the projects that caught my attention, so please feel free to share your favorite projects so that we can make a list of best open source projects and start creating documentaries on them.
WebMadeMovies
read more [Less]
|
Copyright
©
2013
Black Duck Software, Inc.
and its contributors, Some Rights Reserved. Unless otherwise marked, this work is licensed under a
Creative Commons Attribution 3.0 Unported License
. Ohloh
®
and the Ohloh logo are trademarks of
Black Duck Software, Inc.
in the United States and/or other jurisdictions. All other trademarks are the property of their respective holders.