Mozilla Popcorn on BBC World Service

November 21, 2011 § 1 Comment

The BBC’s tech program “Click” interviewed Kat Cizek about her new interactive documentary, One Millionth Tower, and how she used open source technologies like WebGL and Mozilla Popcorn to make it unique. (Listen to the MP3 or OGG version.)

Showcasing open source through high-profile productions

It’s inspiring to see media like the BBC make the connection between new open source technologies and the new forms of storytelling they open up. The interview begins with the example of how high-profile productions like Toy Story and Avatar changed the culture and market of film by showing what new computer-generated imagery could do.

In the same way, productions like One Millionth Tower can showcase the birth of new “web-native” storytelling, built using the open web as its canvas.

This is exactly the theory of change Mozilla Popcorn began with when it started two years ago: showcase the power of open through high-profile productions that make other filmmakers take notice and say: “I want that!”

As guest Bill Thompson put it:

As someone familiar with the patterns of linear storytelling that you see in most documentary films, it’s great to see somebody breaking away from all those conventions and doing something for the first time that a lot of other filmmakers are going to look at and think: ‘we want to start telling stories in this way.’

Just as early web pages broke away from the linear news narrative in news stories, this is breaking away from the linear storytelling narrative in documentary film.

Listen to the full MP3 or OGG interview.


Popcorn 1.0 launches at Mozilla Festival with exclusive world premiere

November 5, 2011 § 5 Comments

Today is a big day for Mozilla and web video. Popcorn, Mozilla’s new HTML5 media toolkit, just launched version 1.0. And the National Film Board of Canada’s “One Millionth Tower” project, a unique Popcorn-powered web documentary, makes its world premiere this weekend at the Mozilla Festival in London and online at

The future of web video

Popcorn, which Fast Company recently called “the future of online video,” allows web filmmakers to amp up interactivity around their movies, harnessing the web to expand their creations in new ways. Popcorn uses Javascript to link real-time social media, news feeds, data visualizations, and other context directly to video playback, pulling the web into the action in real time.

The result is a new form of cinema that lives and breathes like the web itself: interactive, social, and rich with real-time context and possibilities that continue to evolve long after filming wraps.

The world’s first open source 3D documentary

Director Kat Cizek used Popcorn and other open source tools like WebGL to create One Millionth Tower, the latest installment in the NFB’s Emmy award-winning Highrise series. One Millionth Tower brings residents from a dilapidated Toronto apartment complex together with architects, designers and artists, working together to imagine how they can revitalize their homes and make their world better.

The film then uses the magic of animators, web developers and Popcorn to bring these ideas to life through a multi-layered, three-dimensional landscape that runs directly in the web browser.

Popcorn made it possible for the filmmakers to control a 3D environment in WebGL, and then augment it with real time information pulled from Wikipedia, Yahoo’s Weather API, Flickr and Google Maps. The result is a  unique viewing experience customized in the browser for each viewer. When it’s raining in Toronto, for example, it starts raining in the virtual  world of One Millionth Tower as well.

One Millionth Tower director Kat Cizek

Opening new possibilities for filmmakers

Cizek says Popcorn helped to push her project beyond the confines of a  traditional documentary film. “We wanted to marry the storytelling magic of cinema with the participatory, interactive and networked power of  the web,” she says. “It’s a  fusion of collaboration, media and art-forms — all coming together  through the web.”

Cizek sees a connection between the values of open source and public institutions like the NFB. “Life and art are a lot more fun when we share and build on each others’ ideas. That’s the philosophy behind open source, and it’s really the original philosophy behind the web as whole.”

Mozilla Popcorn team lead Brett Gaylor

A new genre of “web-native movies”

Mozilla Popcorn team lead Brett Gaylor, who also directed the NFB documentary RIP: A Remix Manifesto, sees One Millionth Tower as part of a larger trend: a new genre of “web-native” filmmaking.

This is the moment where web video grows up as an artistic medium,” Gaylor says. “In the same way that earlier film pioneers experimented with new techniques like montage, we’re now seeing ‘web-made movies’ that pull in real time information from the web.”

Director Steve James (left) works with programmer Rick Waldron on a Popcorn.js-based interactive video for his film The Interrupters. (Wired)

From “living documentaries” to enriched news and semantic sports

Those experiments include other high-profile productions as well. The Independent  Television Service (ITVS) recently paired documentary producers with Popcorn developers to produce the “living docs” series, turning award-winning films into dynamic online  experiences. And Steve James, the acclaimed director of Hoop Dreams, recently used Popcorn to augment his new film with photos, news clips and neighborhood maps.

Popcorn has broader applications as well. Semantic video pioneer RAMP is using Popcorn for The People’s Choice Awards. PBS Newshour used it to annotate President Obama’s 2011 State of The Union Address, and the French and German broadcaster Arte has used Popcorn to enhance current affairs  programming.

Sports broadcasters are also interested in using Popcorn to weave players’ and teams’ stats and social media into their broadcasts.

What’s next for Popcorn?

As Wired put it, Popcorn “could be the next big thing in internet video.” Coders, filmmakers and journalists are exploring its potential in hackfests and learning labs at this weekend’s Mozilla Festival. Take a guided tour or get more involved at

Popcorning the Octocopter: making web sites that fly

November 5, 2011 § 5 Comments

Meet Nico and his amazing Octocopter, a remote-controlled flying drone with a video camera attached. Nico and his new start-up, Bugeye Films, are using this technology to capture amazing video footage impossible to get any other way.

The camera can hover over your shoulder one minute — then soar fifty feet above you the next. Here it is in action over the jungle, ocean and waterfalls of St. Lucia. There’s other demos here, here and here.

“Working without the confines of gravity let’s us take the lens (and the viewer) where a jib arm or crane simply can’t.” —Bugeye Films

Octocopter + Mozilla Popcorn = win

Nico and his business partner Chris are in London at the Mozilla Festival, exploring the potential of adding Popcorn, Mozilla’s new HTML5 media toolkit, to their flying films.

We think it’s a natural fit. Popcorn is tailor-made for telling dynamic stories about people and places. And flying footage seems well suited for metadata, given its more ambient, “lean back” feel than traditional interviews or video narratives — where pop-ups and metadata can seem distracting or overwhelm the viewer with too much information.

Capturing GPS and other metadata as it flies

The copter is also able to record metadata as it flies, including GPS data, altitude, temperature, air pressure, power usage, etc — all of which could be pulled in with Popcorn.

Bugeye is currently using 5D and Gopro cameras. Attaching 180 or 360-degree camera would open up the possibility of rotating your point of view during playback in the web browser, creating a “turning your head left or right” feeling. Or even the sensation of piloting or flying yourself.

Making web sites that fly

Imagine a web site for the Mozilla Festival that zooms out and hovers outside the building when you click “about.” Then rockets in through an open window and spirals to the fifth floor media booth when you click on “news.” Popcorn plus the octocopter could spawn a whole new digital genre: web sites that fly.

Telling unique stories about places and ecosystems

Nico just returned from Kenya, where he used the octocopter to capture footage of a wilderness resort. He’s also been approached by real estate developers (“show me what the view from the 30th floor window will look like after the building is constructed”),  golf course owners (virtually fly over the 18th hole) and parks.

Imagine virtually flying over your camp site or canoeing expedition route before you leave — with useful metadata woven into the experience. What’s the name of that river? What fish swim in it? When does fishing season start? Is that a good place to camp? The possibilities are endless.

Our challenge: add Popcorn to this London video

With some kind assistance from Film London and the City of London Parks Department, Chris and Nico captured this flying footage in Twickenham yesterday. Their challenge to you: help add some Popcorn magic to it. Weave in metadata about the location and landmarks. Add Twitter, Wikipedia or Google maps data. Or whatever spins your rotor.

Nico and Chris will be in the Popcorn design challenge space at the Mozilla Festival Sunday. Tweet about your demos or ideas through #mozfest. Or get in touch with them directly through Bugeye Films.

Press calls Mozilla Popcorn “the future of online video”

October 26, 2011 § 4 Comments

Mozilla Popcorn has been getting some noteworthy applause and media attention lately, with Wired and Fast Company both calling it the future of online video. As we approach the launch of Popcorn 1.0 at the upcoming Mozilla Festival, it’s looking more and more like the kernel of something that can blow up big.

Wired: Popcorn “could be the next big thing in internet video”

Some excerpts:

At Popcorn Hackathon, Coders Team With Filmmakers to Supercharge Web Video

Popcorn.js, which few outside the web-development world have ever heard of, could be the next big thing in internet video. It’s a simple — for coders, at least — framework that allows filmmakers to supplement their movies with news feeds, Twitter posts, informational windows or even other videos, which show up picture-in-picture style. For example, if a subject in a film mentions a place, a link can pop up within the video or alongside it, directing the viewer to a Google Map of the location.

Popcorn-powered videos work in any HTML5-compatible browser and are easy to navigate for anyone who has ever used the internet. The tools the Popcorn coders are creating could lead to far more interactive online experiences, not just for movies and documentaries but for all videos. Want to make a cat video replete with recent updates from Fluffy’s Facebook page and all the latest tweets tagged #cats? There could soon be an app for that.

If creating videos with Popcorn (the authoring tool is cheekily called Popcorn Maker) becomes a lingua franca for video encoders everywhere, it could make video-watching and movie fandom a far less passive experience. Just imagine what would happen if a crowdsourced film like Life in a Day got the Nico Nico Douga treatment. And finding creative ways to use new tools is, after all, what the web excels at.

Fast Company:”the future of online video”


Popcorn.js Lets Web Filmmakers Fuse Video With Interactive Design

The open-source toolkit from Mozilla uses the power of HTML5 to let web filmmakers create innovative interactivity around their videos.

This isn’t merely wallpaper to hang around a Vimeo window: Popcorn uses Javascript to link real-time data visualizations, social media, and supplemental media to the video playback.

And Mozilla is pushing hard to expand Popcorn’s creative possibilities: it recently sponsored a hackathon in San Francisco teaming up marquee-name filmmakers like Steve James (who codirected “Hoop Dreams”) with creative-coding partners, who built 3-D visualizations, personal Flickr feeds, and other interactive layers into the online video experience in a matter of hours using Popcorn’s simple Javascript libraries.

Once you get your appetite whetted, you’ll want to team up with a Javascript ninja of your own and really flex your web-video muscles. Because this is the future of online video: not just passive media silo’d in a low-res box onscreen, but richly integrated visuals that communicate with and affect the design and interactivity of the entire web experience they’re embedded in.

Get a taste of Popcorn in action

It’s great to see these articles showcasing examples of Popcorn in the wild. For example:

  • Steve James, the acclaimed director of Hoop Dreams, brought his new documentary The Interrupters, about former gang members and ex-cons who try to stop violence in their neighborhoods. During the two-day event at Mozilla’s new digs in the Hills Bros. Coffee building, James worked with coder Rick Waldron to augment the film with links to photos, obituaries, news clips and neighborhood maps. (see it here).
  • One Millionth Tower, a National Film Board documentary project, couples Popcorn with 3-D graphics generator WebGL to create a web-ready documentary that shows what would happen if the residents of a Toronto highrise were allowed to participate in re-creating their home tower.
  • 18 Days in Egypt created a site that pulled in Flickr photos, newsfeeds and other data from around the web (see the 18 Days prototype from the recent Mozilla Popcorn hack day). If the filmmakers tool had been live as events were unfolding, it could have functioned as a massive media-collection tool (and can now be used to follow the events in Egypt as they continue to unfold).
  • Aman Ali and Bassam Tariq, the creators and subjects of 30 Mosques, worked with Mozilla’s Bobby Richter to build a site where people can upload a video of themselves doing something related to specific themes during the holy month of Ramadan or based on challenges that they suggest. Those videos would then populate a timeline for each day of the month (see the 30 Mosques Popcorn prototype).
  • And of course there’s plenty of other demos on the Popcorn web site

“Social video” and the 21st century classroom

June 14, 2011 § 6 Comments

The future of educational video? Toronto's Summit Heights Public School is experimenting with Popcorn.js in the classroom

Video is the lingua franca of our age. What if we could bring it into the classroom in exciting new ways? What if we made video social — collaborative, interactive, and linked to a wealth of deeper context and resources — instead of the traditional “TV in a box” experience? What if students could talk back to video, remixing and making it part of their own essays and art, instead of just passively consuming it?

That’s the possibility Mozilla’s new Popcorn video tool brings to the classroom. Popcorn allows users to turn boring old traditional video into dynamic “hyper-video” or “social video,” weaving in context and content from across the web. The educational opportunities for the tool are huge, from “video book reports” to dynamically exploring the solar system to turning every multimedia encounter into a chance to dig deeper,  learn more and explore.

Mozilla's new Butter app makes it easy for users to add web events to any video.

Testing Popcorn and Butter with kids

Butter,” a new user-friendly web app in development, is designed to make Popcorn easy for non-technical audiences. But is it simple enough for 11 and 12-year-old students to use? That’s the experiment Kimberly Mercer’s Grade 6 class at Toronto’s Summit Heights school has been conducting this week, with a special visit from several members of the Butter development team.

Ms. Mercer’s class has been piloting the use of netbooks to facilitate 1-to-1 learning, and she’s been looking for challenging learning activities:

 “I set about finding an innovative task for my group of talented and  inquisitive young people. This search has ended, much to my delight, in a  great big vat of ‘Butter.'”
Her students have been working in small groups on a range of topics — from electricity to biodiversity to aboriginals — and creating an interactive “Popcorn movie” for each. Students have been reviewing and submitting possible videos for “Buttering” on their class wiki.

Students discuss videos for "Butter-ing" on their class wiki

Co-designed by kids, for kids

Not only are students using the software, they’re actively making it better. Part of the learning process involved filing bugs and making feature requests, collaborating with David Humphrey‘s team of Seneca College students, many of whom visited the classroom. The students’ feature requests are awesome, and underscore the huge value in this kind of co-designing and testing with learners. Sample feature requests include:

  • A built-in dictionary feature. To help define new or difficult terms in a video.
  • Soundtrack. “A soundtrack that plays music/ sounds of your choice. Muting the video may be optional.”
  • Skipping / omitting portions of the timeline. “We would like to be able to delete parts of the initial video, because if there is some useless talk at the beginning with this feature, than you will be able to get rid of it.”

Helping kids define and create the web

Baked into all of this is a more fundamental lesson — seeing the web and video not as something to be passively consumed, like TV, but as “magic ink” that we can make, play with, and use as a canvas for our own learning and self-expression. Or as Ms. Mercer puts it:

“The  essence of this project is to empower this group of 11 and 12  year-olds to be part of the process of defining and creating the web…. Though daily communication with the [Butter] development team, it is my hope that the  students will learn that the web is not a finished product to be consumed, but that it is a living, breathing, evolving reflection of  those who interact with it.”

More on this project — including student work samples and ways to replicate the project in your own classroom — coming soon.

Making MoJo design challenges sing

April 19, 2011 § 5 Comments

The Knight-Mozilla News project (aka “Mojo”) is preparing a series of design challenges. The goal: invite the world’s most creative designers and developers to solve problems that will shape the future of news and the web. The three design challenge topics have been chosen — now we need to ensure the storytelling and messaging are right.

The challenge statements below are at second draft stage. They need your testing and feedback to get to a third and final draft. Do they make sense? Do they inspire? Would you, as a challenge participant, have enough info to get started? Please post feedback as comments here, or suggest edits directly in the etherpad version.

(please note: is not up and running yet)

***DRAFT ONLY — not for publication***

Challenge 1
Unlocking video: How can new web video tools transform news storytelling?

the PBS Newshour 2011 State of the Union address uses Popcorn.js to combine context and analysis with video

Going beyond boring embedded video boxes

Video is a central part of people’s daily news experience. But most online video is still stuck in a boring embedded box, like “tv on a web  page,” separated from the other forms of content around it — offering little in the way of context or opportunities for  viewers to explore or go deeper.

New open video tools make it possible to pull data from across the web right into the story, and for information related to the video to literally pop onto the page. The challenge is using these tools in ways that serve the story, enriching journalism with new forms of context, engagement, and the real time web.

Invent new ways to tell multimedia news stories online

Propose compelling demonstrations of how HTML5 and open video can  create new ways of telling news stories online, weaving together moving images with related data, context and opportunities for  engagement. Take a moment to:
  • Check out Arte’s use of semantic video tools and storytelling here and here.
  • Visit sites like Storify and What might a similar aggregation experience feel like for video?
  • Need more examples here. Please add as comments below.

How would you tackle it? 

  • What creative storytelling approaches do these new web video tools open up for  news  organizations?
  • How might you tell a story by pulling in video, data and other material from across the web?
  • How  can semantic video help audiences dig deeper into other forms of  context and content?
  • How do we make it a compelling narrative experience  — and not just overwhelm viewers with information overload?

Submit your idea before May 6

Submissions for this challenge close May 6. Your entry can take many forms. You could submit:
  • a concept brief or blog post explaining your idea (500 words or less)
  • an embedded video or link to a slidecast (extra points for explaining your idea this way!)
  • an early software demo, proof of concept, prototype, or HTML mock-ups
  • sketches, wireframes or visual mock-ups
  • a draft open protocol or standard

More details about rules, judging and other logistics are taking shape in the MoJo Challenge Brief (draft only) and MoJo Reviewer Guide (draft only). Good luck!

Challenge 2
Beyond Comment Threads: How can we reinvent online news discussions?

Creating new connections between news producers and consumers

Online discussion threads have been a part of the Internet since the late 90s. But the form of user commentary has stayed fairly static, often relegated to sit far below the fold at the end of the story.

New capabilities in the browser, like HTML5 canvas and video, provide opportunities to completely re-think the relationship between news users  and producers. Emerging  standards like OStatus, Webfinger and Salmon are creating opportunities to liberate discussions from being tied to a single site, make commenting more social, and re-aggregate users’ discussions into a single identity. And “atomic” commenting enables users to comment on a specific paragraph, sentence or moment in stories.

At the same time, media is moving beyond the traditional “news story” as the only unit for commenting and interaction, stretching to include narrative arcs of multiple stories over periods of time, “explainers” that provide background knowledge for strings of stories, “streams” that include initial reports followed by updates and corrections, and new forms of data-driven journalism. All of this means the commenting space is ripe for innovation.

Design news ways to weave the audience’s voice into news

Demonstrate  a new form of user interaction with news that is atomic, aggregated,  augmeted, or just plain awesome. Push beyond the ways we currently think  about comments and debate online. Grab your sketch pad and:
  • Explore the current state of user-interface innovation using JavaScript (here, here or here) or JavaScript plus HTML packaged as a browser add-on.
  • Have a look at this presentation on Salmon.
  • Check out early examples of atomic commenting like the Django Book (note the comment bubbles at the side of the page), or SoundCloud and Viddler, which allow users to place comments and tags at various points on the timeline.
  • Any additional examples here? Please add.

How would you tackle it?

  • What’s next? Where do you see the next radical improvement in user commentary?
  • How do we go beyond end-of-story  comment  threads? Are there other ways for news users to interact with  news  content?
  • How do we make it more social?

Submit your idea before May 20

Consider  these in the context of online comments or debates, then show us what  the modern web platform can do. Submit your idea for this challenge before May 20. Your entry can take many forms. You could submit:
  • a concept brief or blog post explaining your idea (500 words or less)
  • an embedded video or link to a slidecast (extra points for explaining your idea this way!)
  • an early software demo, proof of concept, prototype, or HTML mock-ups
  • sketches, wireframes or visual mock-ups
  • a draft open protocol or standard

More details about rules, judging and other logistics are taking shape in the MoJo Challenge Brief (draft only) and MoJo Reviewer Guide (draft only). Good luck!

Challenge 3
Blow our minds: What’s the next killer app for news?

Tapping the app opportunity for news

News  organizations are creating a host of interactive tools, applications,  visualizations and new ways for readers to interact with reporting and  data. But most of these news applications and tools — like ProPublica’s  “Dollars for Docs”  or the LA Time’s “Mapping LA” projects — are confined to a single web site or page. They’re not able  to take on a life of their own, create new experiences for users beyond  the traditional web browser, or tap into the growing app market.

HTML5  presents an opportunity to create entirely new ways of interacting with  “news apps” that we haven’t even imagined yet, and to create whole new  experiences for users. What happens when we combine news and your phone and geolocation and  your social network? How do we get data, reporting and local knowledge  into the hands of users wherever they may be, on whatever device or  platform they happen to be using?

Design a mind-blowing news app using HTML5

This  challenge is an opportunity to design the next  killer app — think  Shazam or Yelp for news — across multiple devices and platforms,  creating whole new experiences for news consumers. Check out news applications like:
  • Any additional examples here? Please add.

Get a sense of what HTML5 and “open web apps” make possible:

  • Any additional examples here? Please add.

How would you tackle it?

  • What will the  news  applications of tomorrow look like?
  • How can news applications break free of web pages and become cross-platform, immersive experiences?
  • What  itch does the next killer news app need to scratch? How can thinking  beyond traditional web pages create new audiences and uses for news?

Submit your idea before June 3

Submit your idea for this challenge before June 3. Your entry can take many forms. You could submit:
  • a concept brief or blog post explaining your idea (500 words or less)
  • an embedded video or link to a slidecast (extra points for explaining your idea this way!)
  • an early software demo, proof of concept, prototype, or HTML mock-ups
  • sketches, wireframes or visual mock-ups
  • a draft open protocol or standard

More details about rules, judging and other logistics are taking shape in the MoJo Challenge Brief (draft only) and MoJo Reviewer Guide (draft only). Good luck!

Mozilla’s media and digital literacy projects in PCWorld

March 30, 2011 § Leave a comment

PC World interviews Mozilla’s Ben Moskowitz on the open Web, open video, media literacy and new Mozilla projects like Popcorn, Butter and Hackasaurus.

As our factory, playground, and public square, the Web is the medium at the top of mind for all of us. We have to keep it open to new entrants, innovative, transparent…  Mozilla is all about giving users the power to control the code.

Where Am I?

You are currently browsing entries tagged with webmademovies at o p e n m a t t.