Updates on the Popcorn project

Everyone is still recovering a bit from Buttercamp. Anna Sobiepanek beat us all to it with a great recap of the event, but let me say how thankful I am for the extraordinary effort the participants put into the day. We learned a lot about how to do events like these, and definitely left wanting to do more.

As Anna mentioned in her blog, our biggest lessons were a) the need for designers to be present, and b) that we should probably do these over two days. Scott Downe benefited from teaming with Zach Liberman, and mentioned that 2 developers are crucial for a team, so that if one struggles with a blocker, the other can forge ahead. Well noted.

Demos:

Note: these demos will all require a modern browser, may not work for you at all, and are the product of one day’s work.GML + Popcorn:

#18daysinEgypt:
To have popcorn events appear in specific locations on a full screen video, Brian Chirls wrote a popup video plugin. Video events that appear cause the main video to lower volume and loop.http://code.chirls.com/buttercamp/

Kapor Center Mural Unveiling
Trevor Parham used Butter initially for data entry, but then decided to focus on CSS and layout to create this compelling use case for popcorn: an annotated version of a recent event at the Kapor Center.http://kaporcenter.org/files/video/

TubeyLoops
A modified version of PatternSketch, which controls videos via popcorn to create a video remix machine.http://www.tubeyloops.com/tubeyloops/
note: use keyboard keys Q W E R to control video.

Mozilla’s Web Made Movies project is happy to announce the release of Popcorn.js version 0.4 (download now). This is the biggest release the Popcorn community has done to date, with over 70 new features and bug fixes. And with this release, we’ve also re-thought of popcorn not as simply a library for controlling HTML5’s <video> element, but a way of creating an event system for all time-based media on the web.

New features

Popcorn.js 0.4 adds many great features for our users, including new plugins for OpenStreetMap, Google Street View, an RSS Blog Reader, dynamic HTML Templates using Mustache, and much more.

Another important change in this release is how we’re packaging Popcorn.js. Until today, users had to include popcorn.js along with each plugin they’ve wanted to use. This offered flexibility but also complicated things for novice users. Our users asked us to make popcorn.js easier to use, and we listened: we’re now offering a single file distribution that includes all Popcorn’s features: popcorn-complete.js. It’s one JavaScript file to include in your page and you’re ready to rock.

We’ve also added initial support for more popular web video services in the form of Player Plugins. Player Plugins make it possible to use popcorn’s rich event system with all kinds of web media, not just HTML5 <video>. Imagine being able to work with a <canvas> or WebGL based animation, a slide presentation, or a legacy video player. It’s all coming.

In this release we’ve targeted YouTube and Vimeo. Yes, popcorn now has limited support for some Flash players!

Bridging Flash Users to HTML5

Popcorn is the go-to library for those who want to do cool things with HTML5 <video> and <audio>. One of the goals of Web Made Movies is to accelerate the market’s move to open video. We’re doing this by connecting artists to technologists and showing that “open” is more than just a philosophy–it’s a powerful and flexible way to create that allows us to mix the rest of the web with video.

By meeting filmmakers where they are now, we can get there faster. As users transition to these open technologies, we want to provide an on-ramp from existing, Flash-based video to the newer standards. To do so, version 0.4 introduces Player Plugins, which allow Popcorn to work seamlessly with older, existing technologies like Flash until they are phased out. We think this bridge is important as we seek to enable the larger web-video community to transition to HTML5.

One very important note, however, is that native HTML5 video can do things that proprietary players can’t. For this reason, native HTML5 video will always be the best way to work with popcorn.

For this reason, we’re continuing to encourage all filmmakers to publish their content using the <video> tag. To make this process easier, we’ll be releasing an HTML5 embed builder within the next week. You can take a peek at our builder if you’re interested—let us know what you think in the comments.

Get Involved

The Popcorn.js community is growing along with the code, and this release is a perfect time for you to get involved. Have you got an idea for what Popcorn should do? Are you interested in using it in your own project? Want to help us continue to improve the web for filmmakers and other video content creators? We’d love to have you join us as we push envelope on what video on the web can mean.

We’re starting to make arrangements in New York for Buttercamp, a gathering of filmmakers and developers at Tisch’s ITP. Our goal is to bring technologists and media creators together to brainstorm how new web technologies can improve the experience of creating, watching and interacting with moving images on the web. We’re keeping things focused – we’ve asked interested filmmakers to apply and bring specific projects to the event.

We’re hoping Buttercamp will be the start of creative relationships between the Web Made Movies team and the independent filmmaking community. We want to work with you!

As mentioned on their blog, we have joined a partnership with the NFB’s Platform Development team to investigate ways HTML5 can help add value to their rich catalogue of films from the last 75 years.

Our experiments revolve around Butter, the authoring environment for Popcorn.js. From the beginning, we saw education as a great use case for this technology. What if a teacher could browse the NFB’s catalogue, select regions of films, drag them to a playlist, add related content from the web on Wikipedia or Google Maps, and create a custom “lesson plan” from this material?

What if a student could create their own “book report” using the same methodology? Along with developers at A Navalla Suiza, Bocoup, the NFB developer team and Mozilla, we’re going to be exploring this idea and creating a reference implementation over the coming months. Stay tuned!

This little pearl of wisdom was delivered to me by my fellow Mozillian Chris Blizzard while I was interviewing him for a video. The recent adoption of our popcorn.js library by Arte, one of Europe’s most respected broadcasters, is making me agree.

Popcorn.js is a project of Web Made Movies, Mozilla’s open video lab. It came out of a frustration with the way filmmakers and media publishers were hosting their videos on the web. In most cases, we were seeing “TV in a webpage”, a block of proprietary code that was built on technologies that sidestepped the web’s “view source” ethic and didn’t actually interact with the rest of the page. While sites like YouTube have seen a fantastic surge of users and content over the last several years, the video itself has been a “black box” that the rest of the web page couldn’t understand. As a result, video and the rest of the web have never truly merged.

Enter HTML5 and the video tag, and suddenly we can apply web technologies like CSS and Javascript to videos. And with popcorn.js, we can share data ABOUT the video with web services like twitter, flickr and wikipedia, allowing us to create mashups of web services and moving images.

When Arte began noticing popcorn.js, they wondered if this work could be a good fit for some of their programming. They turned to the seasoned developers at Upian, who were able to pull our open source code from Github, and today we’re immensely proud to announce that the web versions of Notre Poison Quotidien have been augmented and remixed using popcorn.js.

As you can see on the beautiful pages they have put together, this content is an ideal use case for popcorn.js. Producers are often at a loss for how to deliver the reams of associated material that surround their content – well, thanks to the open technologies that make the web, now we can do that!

My colleague David Humphrey, whose students at Seneca College’s Center for Development of Open Technology are in fact among the core authors of the technology, expressed to me how happy he is to see the technology being adopted “in the wild”. “This is how we’ll make popcorn even better. Let’s see how people use it and learn from that”, he remarked in a recent discussion online. In collaboration with great partners like Arte, our growing community at Web Made Movies is changing the world of web video, a little bit of software at a time.

1) Exercise caution when giving 12 high school students access to an etherpad that is projected against a wall

2) The Bay Area Coalition (BAVC)’s Factory program for youth is srs bizness

Mozilla has partnered up with the Bay Area Video Coalition and Zero Divide to implement the technologies coming out of Web Made Movies into the current curriculum of The Factory, a video collective for motivated youth in the Bay.

Ben Moskowitz and I came to meet members of the collective, and were joined by our Mozilla colleagues Atul Varna and Lukas Blakk. Lukas had recently been working with teenage girls at the Dare 2 B Digital Conference, addressing the gender gap in computer science, and Atul has been working on the Hackasaurus project with Drumbeat, a set of tools to encourage kids to hack the web. The 2 days at BAVC were for us a way to test some of our thinking about “web literacy”, to test the Butter authoring tool, and to meet the youth at BAVC. We were hoping that they’d understand what we were banging on about after the two days and would be inspired to bring a hacker ethic to their projects.

Our first excercise was to wake the HACKASAURUS. Everyone checked out the X-Ray Goggles, a fantastic tool that lets you see how a web page is put together, and modify elements of it. Paired with HTMLpad.org, which renders HTML typed into an Etherpad of the same name (try it – its awesome), the Hackasaurus tools teach the user that the web really is made up of many simple parts. To help visualize things, students printed out their favourite websites, cut them up, pasted them back together, and re-created their cutups in HTML. Its a great basis on which to start playing with popcorn.js – it puts one in the mindspace to consider “how can I hack this video?”.

Fortunately, our friends at Bocoup had pushed some last minute changes to Butter, the authoring tool for popcorn, and it was ready enough to be tested by the group. We loaded up one of their productions from last year, “The List”, which was a dramatization of the military recruitment that happens when students take standardized tests. There was a lot of factual information in the video, so it was a perfect test bed for popcorn.

The students formed groups and each took a section of The List and pulled it into Butter. They added semantic data, some hacked with Ben a method for displaying images on top of the frame, others linked to an HTML page that let users opt-out of recruitment, others brought in photos from flickr, articles from Wikipedia and maps of their school on Google Maps. Lukas wrote a quick script that would chain the videos together, and then we had a screening at the last minute!

You can watch the completed movies here – keep in mind these were created in two hours by a group that had never written any HTML, so we were well impressed.

One of the great things that came out of the workshop was a huge list of bugs for popcorn and butter created by the students that we can now bring back to the development community. We’re looking forward to coming back in April and working with The Factory through till the fall!

Along with my other colleagues at Mozilla, I’ve been doing a lot of work lately thinking about what the rest of 2011 holds. It’s been great to read posts by Ben Moskowitz, Phillip Smith and Nathaniel James as they describe and forecast their work on the Knight/Mozilla Technology Partnership. It’s painting a great picture of Mozilla’s commitment to transforming media and journalism – I thought I’d share my plans as well in the video above.