Shakespeare goes social: Mozilla Popcorn in the classroom

What light through yonder Popcorn-powered window breaks?

What can “social video” do for learning?

The hyper-talented Kate Hudson (co-founder of, learning lab shepherd for the Knight-Mozilla project, and a designer on the Mozilla Festival data journalism handbook project) has made an outstanding “Popcorn Shakespeare” demo that highlights the potential of Mozilla Popcorn for learning and education.

I think we’re seeing the birth of a new genre of interactive film — “hyper-video,” “social video,” or pop-up video on steroids — that will revolutionize multimedia in the classroom, and maybe even the lingua franca of learning in general.

Using the web to blend moving images, interaction and context

“Popcorn Shakespeare’s” ingeniously simple user experience: watch video of a Shakespeare performance, then move your mouse away at any point to pause the playback and get help with specific terms or passages you don’t understand. (e.g., “What does ‘Hie thee hither‘ or ‘the golden round‘ mean?”) You can also dig deeper into context or notes from your instructor or peers.

But its more than a glossary tool. You can also navigate the video by clicking directly on portions of the the text (similar to Mark Boas’ work with hyperaudio). Specific terms and passages also get their own URL, so you can skip directly to specific scenes for further study — and begin to “quote” and link to video as easily as you quote text.

Morning Session

Kate Hudson at the Mozilla Festival in London last month

Delivering context and metadata only when you want it

In Tuesday’s weekly Mozilla Web Maker call (which are open to all — please join us), Kate explained that the demo was inspired by seeing other students struggle with the language in Shakespeare’s plays, and the difficulty of looking up every word in a glossary as it occurs in performance. What makes her demo so ingenious is the way she solves this problem with dead simple UX: mouse away and the video stops, mouse back and it seamlessly resumes.

That simple touch helps make the surrounding tools and context timely and relevant, avoiding the “everything but the kitchen sink” problem of many early Mozilla Popcorn demos. Instead of overwhelming viewers with too much information, Popcorn Shakespeare gives you metadata only when you want it.

Turning “lean back” couch potato-ism into “lean forward” learning and interaction

For me, Kate’s demo speaks to the larger potential of social video in the classroom: turning a formerly passive activity (video watching) into an interactive and social experience. This can allow educators to speak the multimedia language that’s native to most learners, while at the same time making it a more engaging, “lean forward” experience than sitting in a darkened room watching some one-way film.

It’s way beyond the educational videos of our youth — transforming video into a canvas for making, learning and playing with moving images and light.

Making your own social video

And of course, the goal is to make it easy for learners to make these social videos themselves, not just consume the work of others. Kate used the more developer-focused and heavy lifting Popcorn.js to produce her Shakespeare demo.  But the more user-friendly “Popcorn Maker” — which just shipped version 0.1 — aims to make it easy for non-developers, filmmakers and youth to make their own social video mash-ups as well, transforming reformed couch potatoes everywhere into web-made movie makers.  “O brave new world, / That has such people in’t!

Tagged: , , , , , ,

Leave a Reply Cancel reply

Gravatar Logo

Please log in to to post a comment to your blog.

Twitter picture

Facebook photo

Connecting to %s

Popcorn Maker 0.1

After my recent stint in Europe for the Mozilla Festival and MozCamp I had the opportunity to reflect on the development environment of Popcorn Maker, courtesy of the 8 hour flight from Berlin to New York. The result is a version of Popcorn Maker which can be proudly labeled as 0.1, and very friendly to developers.


History Lesson: Butter

Butter Butter was an initial exploration of making a GUI for producers hoping to use popcorn.js for their projects. The app enjoyed some success, but it was eclipsed by the need to expand the app in different directions, which I have written about previously. Like most promising experiments, it needed to be rewritten to be the powerful app we hoped it would become.

Consequently, there was a lot of discussion about how to engineer the experience which was to become Popcorn Maker, which Brett and Ben detailed in their post, Designing the Popcorn Maker. In short, the current goal is to create a web app which encompasses the same ideas as Butter, but makes traditional content producers (usually of the film persuasion) comfortable by drawing memes from other popular pieces of software. However, a functioning web app is only a piece of the puzzle, since harnessing community involvement is a very powerful concept. Eventually, users will be able to use Popcorn Maker like they use WordPress – by downloading and installing the app on a machine of their choice – but with unique sharing capabilities and editing opportunities, like publishing your popcornizedtm template which might be a remix of something like a youtube video page.

Require Saves The Day

Butter - Popcorn Maker The subsequent struggle to design an acceptable user experience and its contention with pace of development and fluctuating feature requests hasn’t offered the opportunity for Popcorn Maker’s codebase to settle. As a result, Popcorn Maker’s developers have had to suffer through a poor debugging experience and a sub-optimal development environment.

Now, that has all changed. Some geniune thinking time and my recent exploits inside Paladin with James Burke, the creator of require.js, has changed Popcorn Maker for the better – for developer and users alike.

Using require.js, I was able to split up Butter’s core and constituent modules into several files respectively. require’s module system makes this process natural and provides a method for producing dependency chains. So, Butter’s core relies on the existence of several smaller modules like Media, Track, and TrackEvent, while Butter’s Timeline module depends on some of the same (plus some others). In other words, dependency chains let a module rely on other modules which may be already shared amongst others still. Of course, this is nothing new to traditional developers who get to use #import to solve a similar problem.

Now, developers are able to isolate and fix bugs without involving a compilation process every time they make a change (since Butter is best suited as a library inside of Popcorn Maker).

Onward: To 0.1

Popcorn Maker + Butter Setup Since Popcorn Maker is an app that wraps Butter, developers can contribute from several perspectives:

  • Popcorn Maker: developing the app itself (UI, storage, exporting, etc.)
  • Templates: building general-purpose Butter templates to let users jump into editing a powerful popcorn experience quickly
  • Editors: providing html-based editors for popcorn plugins which would benefit from specific UI (e.g. Google Maps)
  • Butter: enhancing the core of Butter to fix bugs or provide better functionality or compatibility (standards like to change)

The beauty of the approach we’ve taken in 0.1 is that these elements are as decoupled as possible because they are actually separate require projects. Then, it’s no problem at all to have them share components, and they can depend on each other to provide a nice unidirectional development flow.

Part of the magic is a pattern which James has worked on that circumvents the data-main attribute traditionally attached to a require.js script tag. Instead, a script like this is referenced (in this case, butter.previewer.js):

(function () {
    // Stub for has function.
    function has() {
        return true;

    if ( has( 'source-config' ) ) {
        // Get the location of the butter source.
        // The last script tag should be the butter source
        // tag since in dev, it will be a blocking script tag,
        // so latest tag is the one for this script.
        var scripts = document.getElementsByTagName( 'script' ),
        path = scripts[scripts.length - 1].src;
        path = path.split( '/' );
        path = path.join( '/' ) + '/';

        document.write( '<script src="' + 
          path + 
          '../../external/require/require.js"></' +
          'script>' );

        document.write('<script>' + 
          '(function(){' + 
          'var ctx = require.config({ ' + 
            'baseUrl: "' + path + '../",' +
            'context: "butter.previewer",' +
            'paths: {' +
              // Paths are relative to baseUrl; Notice the commas!
            '}' +
          '});' +
          'ctx(["previewer/previewer"])' + 
          '})()' +

    var ButterTemplate = function() {
      if ( !ButterTemplate.__waiting ) {
        ButterTemplate.__waiting = [];
      } //if
      ButterTemplate.__waiting.push( arguments );
    }; //ButterTemplate

    if ( !window.ButterTemplate ) {
      window.ButterTemplate = ButterTemplate;
    } //if


This pattern, which writes its own require.js-specific script tag when necessary (when not compiled), takes advantage of require contexts (returned from a call to require.config()), and is easily generalized. In fact, it’s used to load event editors, and butter itself. In other words, Butter (and Popcorn Maker, by extension) contains several require projects, each of which can be compiled to provide a minified version. Butter is actually a collection of libraries which can be included independently to provide functionality specific to things like Templates or Event Editors.

So, to create a simple Butter Template, all you need is this:

    <script src="../../lib/popcorn/popcorn.js"></script>
    <script src="../../lib/popcorn/popcorn.subtitle.js"></script>
    <script src="../../butter/src/previewer/butter.previewer.js"></script>
      /* Uncomment to provide custom functionality
        ButterTemplate(function() {
          // namespace has loaded; create your custom template here
    <div id="main" data-butter="media"></div>
    <div id="subtitle-container" data-butter="target"></div>

Similarly, to create an Event Editor, you need this:

    <script src="../../lib/popcorn/popcorn.js"></script>
    <script src="../../lib/popcorn/popcorn.subtitle.js"></script>
    <script src="../../butter/src/previewer/butter.previewer.js"></script>
      /* Uncomment to provide custom functionality
        ButterTemplate(function() {
          // namespace has loaded; create your custom template here
    <div id="main" data-butter="media"></div>
    <div id="subtitle-container" data-butter="target"></div>

Finally, Butter can be imported in the same way (in Popcorn Maker, for example):

    <title>Popcorn Maker</title>
    <script type="text/javascript" src="lib/require/require.js"></script>
    <script type="text/javascript" src="butter/src/butter.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

Notice the extra require inclusion here, which is necessary only because Popcorn Maker is also a require.js project. This way butter.js does not depend on Popcorn Maker to include require.js, and every layer of the project can be nicely compiled.

To reiterate, the very best part is that there is no need to re-compile Butter if a change needs to be made. require.js will let us compile the project only when we want to distribute it.


So, have a look at the app at Monday), or clone the source for yourself to see what you can do locally. As always, reporting bugs is paramount, and is worth almost as much as fixing them. Check out our 0.1 milestone on our lighthouse project, where you’ll almost certainly find a plethora of things to do.

What we made at Mozfest

We’ve had a week to reflect on the explosion of creativity that was Mozilla’s Media, Freedom and the Web festival (MozFest). The festival marked the launch of Popcorn 1.0, and the alpha version of Popcorn Maker. We also partnered with the National Film Board of Canada to premiere One Millionth Tower, a documentary film made entirely in WebGL, using Popcorn as the event system. David Humphrey has written a great writeup on his impressions on the festival, I’d encourage you to read it. Meanwhile, on this blog, I wanted to round up some of the early press reactions, as well as a few links to demos that were made at the fest.

Popcorn.js @ Mozilla Fest 2011

David Humphrey and Brett Gaylor announce Popcorn 1.0 at Mozfest

The Press

From the front page of (Nov 5):
“The makers of the new film One Millionth Tower reinvented the documentary format…. The resulting film is unlike any before it.

One Millionth Tower, which is premiering on the same day it premieres at the Mozilla Festival in London, is not just a static story recorded on film and then edited together for audiences…. Everything is triggered by [Mozilla’s] Popcorn.js, which acts like a conductor signaling which instruments play at what times.

Webmonkey: Mozilla Reinvents Web Video With Popcorn 1.0
“Video on the web has always been a bit disappointing. After all, it’s pretty much just like television, only smaller. Unlike the rest of the web, video is just as much a passive experience in your browser as it is anywhere else.

Mozilla would like to change that.

Gizmodo: Here’s How You Make a Documentary Only Using HTML5 and WebGL

One Millionth Tower makes specific use of a Javascript tool called [Mozilla] Popcorn, which was designed to integrate web APIs into online video. What director Katerina Cizek did was utilize Popcorn to control the movement of the video frame, having it effectively behave like a video camera.”

Boing Boing: A documentary built with WebGL and other open standards

Damn cool.” –Cory Doctorow

TechCrunch: Mozilla Festival salutes more Popcorn and less developer-ghetto

Emmy-award winning filmmaker Kat Cizek described herself as ‘super-chuffed’ when she came on stage to present the world’s first HTML5 film at #mozfest. It was the world premiere of ‘One Millionth Tower’, a documentary that works like the web itself: ever-changing, updated by the minute.

The film was developed with the help of Popcorn.js, Mozilla’s recently launched JavaScript library that works similarly to the hypertext principle in seamlessly mashing up online video with virtually anything online – the most obvious examples would be Wikipedia, Flickr or Twitter. It turns film into a more semantic experience, allowing for more dynamic and interaction.

“We can’t just think about interaction at the end but need it from the beginning to create a conversation between the filmmaker and the audience,” agreed the students involved in the development of Popcorn. “This kind of storytelling is just getting started.”

The New York Times:
One new technology launched and then workshopped at MozFest was Popcorn.js, a library of video augmentation tools that makes it straightforward to overlay content layers per the time signatures in digital video. The Popcorn.js workshop developers took little more five minutes to produce their Web version of popup videos.

The demos

The biggest thrill was seeing the largest gathering of popcorn developers ever assemble roll up their sleeves. There were many new faces, as well, such as the developers from RAMP, who came to the festival to launch their recent foray into popcorn development. Much of what was made over the 2 days is impossible to capture – new connections, new ideas, the start of many projects. A few demos stood out, however, and were showcased at the “closing circle” of the festival:

Popcorn.js @ Mozilla Fest 2011

Popcorn Remote

A great showcase of having popcorn content play simultaneously on 2 screens – imagine a television show with related content on your tablet. Created by the CDOT crew: David Seifreid, Jon Buckley, Christopher DeCairos, Scott Downe.

Popcorn Colour Tracker

Berto Yanez made a great demo showing the possibilities of tracking a colour within a video element, and inserting HTML into this colour.

The Pirate Bay “Augumentary”
With help from the Popcorn community, filmmaker Simon Klose realized a proof of concept for his upcoming documentary “The Pirate Bay – Away From Keyboard” in which related content appears in a sidebar.

See you at next year’s Mozfest!

(photos CC BY-NC-SA by Jonathan Mcintosh)

Evolving documentary with Highrise

Mozilla is proud to have collaborated with the team from Highrise, a unique multi-project documentary from the National Film Board of Canada exploring “vertical living” around the world.

What does citizenship mean in a transnational, globalised context? One Millionth Tower, the latest strand of the multi-media, multi- award-winning HIGHRISE project from the National Film Board of Canada, teams a group of highrise residents in Toronto with architects and animators to re-imagine their surroundings and transform their dilapidated highrise neighbourhood into a vibrant, resident-led community.

Using cutting-edge open-source technology, this interactive documentary enables a 3D storytelling environment within a web browser, incorporating the magic of cinema, architecture and animation. A hyper-local story with a global resonance in its vision for a more human-friendly urban planet – and world wide web.

Mozilla provided technical expertise, guidance and support throughout the development of the project. Together with Highrise + the NFB, we hosted the world premiere at the Media, Freedom and The Web Festival in London.

See for yourself how Highrise is rethinking the documentary genre on the web, and how Popcorn is helping to make it happen, at

Welcome to the evolution of Popcorn!

Welcome to the new home of Popcorn! We’re extremely excited to bring not only a fresh face to the project, but also the release of new software, programs and partnerships.


Firstly, the Popcorn.js library has reached the important 1.0 milestone. This represents an extraordinary amount of dedication from the Popcorn developer community. David Humphrey and the developers at Seneca’s Centre for Development of Open Technology deserve huge kudos, as well as Rick Waldron and his colleagues at Bocoup. We’ve spent a year and a half iterating, testing and improving Popcorn. With the release of 1.0, our API is frozen and we invite everyone – developers, filmmakers and makers of all stripes to create work with this stable and well tested library.

If you visit the Popcorn.js section of this site, you’ll also find a build tool where you can create a customized version of the library. By selecting only the plugins + players you need, you’ll be able to ship a lightweight version of popcorn on any site you develop. Tip of the hat to Lloyd Hillial at Mozilla Labs for creating the foundation for this tool, and Christopher DeCairos for taking it across the finish line.

We’ve expanded and revamped our documentation, which we have decided to keep at the site. While Mozilla is the steward of Popcorn.js, we recognize (and are thankful) that it is a community project that extends beyond our walls, and will therefore continue to maintain the core library there.

Popcorn Maker

In the spirit of “release early, release often” that served us well with Popcorn.js, we also present the alpha version of Popcorn Maker, our authoring tool for popcorn pages. While we know we have much to do before the app is ready for broad adoption, we’re proud of the potential it offers and invite interested parties to develop not only the core of this app, but also a template ecosystem. Development on Popcorn Maker was lead by Bobby Richter, with contributions from Scott Downe, Christopher DeCairos, Mohammed Buttu and David Seifreid. Brian Chirls created an excellent group of templates that showcase how the app can be used by creators.

Learn Popcorn

Looking back at the events we held in 2011, we realized that each had a strong focus on learning. Whether it was Buttercamp, a frenzied hack day for developers in New York, our work with youth media makers at the Bay Area Video Coalition, or the Living Docs partnership with ITVS, each represent an opportunity to teach “web making” skills. There are new genres and opportunities emerging in browser-based film-making, journalism and storytelling. With these opportunities are new skills and approaches that need transferring. For this reason, we’re formalizing our learning programs under the “Learn Popcorn” umbrella.

With these new changes to Popcorn, we’re also retiring the Web Made Movies program and website. It has been a successful and fruitful framing of our innovation efforts in filmmaking, but we felt that it was time to reduce brand confusion. We’ve imported all of the blog posts from that site here – they’re a great archive of the thinking that led us up to this point.

A final thanks goes to Gopal Raju at Convax Solutions, the talented designer who built this site.

The Living Docs Hack Day

On October 12th and 13th, ITVS (the Independent Television Service) and Mozilla convened 6 filmmaking teams and 6 of the world’s best html5 video developers at Mozilla’s San Francisco Office. They were gathered to participate in the Living Docs hackathon – a two day event framing the larger Living Docs project.

Each filmmaking team had developed a concept for how their documentary film could be translated to the web, using HTML5 and popcorn.js. In calls, webinars and face to face meetings leading up to the event, the filmmakers had been asked to consider a “living documentary” approach, where the content of their piece is informed and augmented by media that exists on the web. Through this approach, the goal is a documentary experience that is unique to each user and each viewing.

The results were nothing less than extraordinary. Each filmmaking team, many who had never authored interactive work, was able to create a compelling and emotional experience that was heightened by the addition of web-based content. And each developer present was able to fulfil these visions while keeping the intent of the overall documentary.

I suggest you watch them for yourself, and stay tuned – our goal is to provide production financing to a selection of these projects so they can be fully realized.

Please note: all of these projects are prototypes created over 2 days and are meant as proofs of concept. You’ll need a modern browser, such as the latest Firefox or Chrome, in order to view.

The Interrupters:
Steve James, Anton Seales Jr, Rick Waldron

Jigar Mehta, Brian Chirls, Georgia Wells, Jason Sussberg

Aman Ali, Musa Syeed, Bassam Tariq, Bobby Richter

The Island President
Bonni Cohen, Spencer Adler, Nalin Patel, Scott Downe

Adrian Baker, Tane Ross, Cole Gillespie

¿Más Bebés?
Renee Tajima-Pena, Kate Trumbull, Abram Stern, Atul Varma
(url not available)

Following the hack day, Angela Watercutter at wrote up a fantastic recap of the event that is definitely worth a read.

Stay tuned for further news about the projects developed at the hack day – our hope is to see these taken further in 2012!

Popcorn 0.9

Among the many developments in the popcorn community (such as the Europeana Remix project and the announcement of our Living Docs partnership with ITVS), the last several weeks have seen much discussion and hacking towards the 0.9 release of popcorn. Over 53 tickets were completed for this release (see our changelog).

Most importantly, this release signals the freeze in the popcorn core API. This freeze comes with a promise: everything developed from here outwards with popcorn won’t break in future releases. The many tests we run for each release back this up.

Here are some key features, as highlighted by the projects core developers:

  • Shorthand for play and pause.  You can now seek to a time and play/pause it by doing 3 ) or popcorn.pause( 4 ) as opposed to the old popcorn.currentTime( 3 ).play()

  • We have provided alias’ for start( in ) and end( out ).  These are familiar terms for film makers, so this should provide them with a more natural feel when developing popcorn tracks.
  • The players underwent a complete re-write courtesy of Scott Downe. All players now derive from the baseplayer, which in turn reduces the amount of code in subsequent players, reducing the chance for bugs.  This also made testing easier as the previous player tests were a nightmare.  Currently only youtube has been re-written, but vimeo, soundcloud and a new jwPlayer ( by karim ) will coming out alongside 1.0.   To use youtube with Popcorn, the old way was: popcorn = Popcorn( “div”, “urlToVideo” ) ); and the new way is simply: popcorn = “div”, “urlToVideo” ).
  • A destroy function has been added, extending a function to the users for destroying a current instance of popcorn.  This will remove all event listeners and prevent any further track event updating.
  • RequestAnimationFrame was added in this release.  This allows for much more precise timing of events, as its on a per frame basis ( 30 frames per second I think ).This gives film makers (and all developers) a great deal more control over when events are fired.
  • Plugins went through a complete style guide clean up and are now looking nice and pretty.
  • exec also was given and alias, called cue, which further provides familiar terms to film makers

    Stay tuned for even bigger news as we prepare for the most important release of all – 1.0!

Mozilla + ITVS: The Living Docs Project

The web is a transformative force. It’s changed the way people connect, work, play, and learn.

But when it comes to moving images, the web’s ability to connect people and events, tailor experience to individual viewers, visualize data in real-time, interact within immersive environments, and link together other media is only starting to become apparent.

The potential for this emerging “connected cinema” is enormous. And Mozilla is teaming up with ITVS to seize it.

Mozilla and ITVS believe the web opens unique opportunities for storytelling. Stories told using the connected technologies, reach, and audience that can only be found online. For the past 18+ months, through projects such Popcorn.js, Universal Subtitles, WebGL, and building support for HTML5 into Firefox, Mozilla has been developing and shipping the tools that will help make this happen.

ITVS has also been hard at work, gathering filmmakers who bring the content, aesthetics, and commitment to social documentary needed to take advantage of the emerging possibilities. Established by the US Congress in 1988 to champion independent producers of television in the United States, ITVS-funded producers have reached tens of millions of viewers and have received accolades including 12 Academy Award® Nominations, 14 News and Documentary Emmy® Awards, 19 Peabody Awards, 19 Sundance Film Festival Awards, 9 DuPont Columbia Awards, 1 Golden Globe® Award, and 1 Prime Time Emmy® Award. More recently, ITVS has expanded their vision to the web, and have been instrumental in such projects as the Alternate Reality Game World Without Oil. Like Mozilla, they see new opportunities in browser-based cinema that are only now emerging.

That’s why we’ve created the Living Docs Program. The program will bring together filmmakers and web developers in a two-day Hack Jam to share ideas, build prototypes, and launch new projects. (We beta-tested this formula last March with Buttercamp). The best projects which will receive up to $75,000 in production funding from ITVS. Mozilla and ITVS will also work with the three chosen projects to drive outreach and engagement to festivals and audiences around the world.

Next week, we’ll bring together 6 filmmaking teams and match them with 6 leading html5 media developers to roll up our sleeves and see what can be made. The projects selected to attend will be:

18 Days In Egypt
Jigar Mehta
#18DaysInEgypt is a crowd-sourced interactive documentary of the events in Egypt from #Jan25 to #Feb11.18 It will tell the story of the Egyptian revolution with the same tools that helped share it with the world in realtime.

30 Mosques
Film: Musa Syeed
Blog: Aman Ali & Bassam Tariq
A film following two Muslim Americans on their road trip across America, visiting 30 mosques, in 30 states, in 30 days. The journey explores what it means to be Muslim in America today and serves as a powerful counter-narrative to the media’s image of a monolithic Islam.

Adrian Baker
Injunuity is a mix of animation, music and real thoughts from real people exploring our world from the Native American perspective. Covering such topics as language preservation, the environment, and Columbus Day, Injunuity is a visually stunning, thought-provoking mosaic of reflections on America, our shared past, our turbulent present, and our undiscovered future.

The Interrupters
Steve James
THE INTERRUPTERS follows a lively group of men and women – most of them former gang leaders and ex-cons -trying to “interrupt” shootings, and protect their communities from the violence they themselves once employed. The film will feature individual Interrupters, and observe the inner workings of the program, including their weekly roundtable meetings and street interventions. Along the way, THE INTERRUPTERS will tell stories of personal redemption while taking viewers on a compelling observational journey into the stubborn, persistent violence that plagues American cities.

The Island President
Bonni Cohen & Jon Shenk
This is a documentary portrait of The Maldives and its complex and charismatic young president, Mahamed Nasheed. Global warming has brought this island nation to the very brink of catastrophe: if the galloping trajectory of climate change continues unchecked, rising sea waters will soon submerge many of its islands and atolls.

¿Mas Bebes?
Rénée Tajima-Pena
¿Más Bebés? reveals the forgotten history of Mexican American women who were coercively sterilized at L.A. County-USC Medical Center during the late 1960s and 70s. Many spoke no English, and were prodded into tubal ligations during thelate stages of labor, often based on little more than the question “More babies?”

We can’t wait to see what these filmmakers will produced when teamed with the talented popcorn community members who will be attending, including:

Abram Stern
Rick Waldron
Scott Downe
Cole Gillespie
Bobby Richter
Brian Chirls
Atul Varma
Dan Mosedale

We’ll publish the results of the hack day, and will be working with ITVS an the filmmaking teams well into 2012. Till the hack day!

Meet the Makers at BAVC

Mozilla is very proud to have collaborated with the Bay Area Video Coalition’s Factory program for youth media makers. This past March, we began working with this group of talented filmmakers to imagine how the documentaries they were creating about Bay Area non profit groups could translate into “web native” cinema. We blogged about our initial meetings here.

These meetings formed the basis of the feedback we needed to create Popcorn Maker, our graphical user interface for Popcorn. Over the summer, the students of Seneca College’s Center for Development of Open Technology worked with Mozilla’s Bobby Richter and filmmaker/developer Brian Chirls on an alpha version of Popcorn Maker. We blogged about this process here.

These worlds came together in August at BAVC’s offices in San Francisco, where we embarked on a four-day sprint to create not only the web documentaries of the students, but a usable version of Popcorn Maker.

This achievement is even more remarkable considering that prior to this partnership, none of the Factory students had any experiencing in authoring web pages. The realization that the web is not simply a medium of consumption, but one of participation, is key to Mozilla’s mission – and underscores our commitment to helping a generation of “web makers” use the web as their canvas. Mozilla’s Executive Director Mark Surman summed up our efforts in this direction in this blog post.

We invite you to explore the work that these talented individuals created, and to share them with your networks! Note: these projects all require modern a modern browser such Firefox 4 or Chrome and a fast computer and connection.

History In These Streets
This web documentary about the Huey P Newton Foundation uses A Google Street View location for each stop on the Black Panthers legacy tour, narrated by David Hilliard. Each location also features a collection of archival photos.
Creative Growth
Using “dynamic content injection”, B-Roll is drawn from flickr images in this documentary about an art rehabilitation center. Based on answers that users give to the filmmakers questions (ie “what inspires you?”), the film will change with each viewing.

Cultivating Community (documenting CIty Slicker Farms)
A full screen video which becomes transparent as Google Maps “pins” are dropped at the site of each farm. When the video is completed, users can explore each site in detail with a video for that specific site.

Inspire Yourself
In partnership with InspireUSA, this group chose to build a site that featured inspirational stories from others living with mental illness. The site features four video vignettes, as well as several written stories collected by the team. These written stories can be updated based on submissions collected on the site.

Popcorn Maker Alpha
A work in progress version of our app can be found at, but be warned that the app is experiencing heavy development 🙂

Popcorn 0.8

It’s been a busy month in the popcorn community. While we’ve been furiously working on Popcorn Maker, the community pulled together last week to land some changes to Popcorn.js. Download it now!

You can see the many changes here in our changelog. Some standouts for this release are:

  • Popcorn.locale – this provides much needed internationalization. Author Rick Waldron has already documented the changes in this API documentation, so if you are keen to offer popcorn in multiple languages, definitely check this out.

  • We have removed support for Google Translate and Google News based on Google deprecating these APIs.
  • The Google Maps plugin has much better support for headings – you can see it in action on the Google Maps plugin page
  • During this release we have added over 100 new tests to ensure that Popcorn is as bug-free as possible.

    Our next release, v0.9, will be our largest ever. As always, we’ll need lots of help. If you’re a Javascript developer, please join us on our issue tracker to see if there is a ticket you can help out with. Now is a great time to get involved with a library nearing maturity!