Buffy slays Twilight: how to make pop-up video mayhem

January 26, 2012 § 3 Comments

Remember those awesome pop-up videos on VH1? Thanks to Mozilla Popcorn, the new HTML5 tool for supercharging web video, the pop-up format is about to get a whole new lease on life.

Exhibit A: this wicked “Buffy the Vampire Slayer vs. Edward from Twilight” remix, created by the mash-up maestro from Rebellious Pixels. Check it out here. Then get started making your own pop-up video here.

“Hacking pop culture”

First posted in its original form in 2009, the “Buffy vs. Edward” remix video has garnered over 4 million views, been subtitled into 30 languages, and received media attention from NPR radio to Vanity Fair (“Buffy Could Kick Edward Cullen’s Precious Sparkly Emo Ass“).

The new Mozilla Popcorn-powered “pop-up” version adds a new interactive layer over top, with added annotations, commentary, and tips on protecting yourself from real-life stalkers.

The video’s creator, “pop culture hacker” Jonathan McIntosh, says the remix is all about hacking gender roles and Hollywood cultural coding — a theme he’s explored in other projects like the hilarious “Gendered Advertising Remixer,” now also available in HTML5 format.

Create your own pop-up video with Mozilla Popcorn

Want to add annotations and pop-ups to your own videos? Popcorn Maker is designed to make the power of Mozilla Popcorn more accessible to non-developers and mere mortals. Popcorn Maker’s “pop-up video” template makes it (fairly) easy for you to add annotations and context to just about any video on the web.

The software is still in early alpha version, so there’s still lots of rough edges. But you can check it out and get started now. Just pick “Pop Video” from the “Choose a Template” menu.  Or have a look at the Popcorn Maker user manual here.


Crowdsourcing the State of the Union

January 19, 2012 § 4 Comments

Mozilla partners with public media to empower citizen engagement in U.S. election coverage

Tuesday’s State of the Union Address from U.S. President Barack Obama will include something special: crowdsourced captions and subtitles provided by everyday citizens around the world.

Using new web tools from Mozilla and the Participatory Culture Foundation, participants will transcribe and translate the President’s speech into dozens of languages in a matter of hours, making it more accessible to those with disabilities and in other countries across the globe.

Launching “Open Election 2012”

The event marks the launch of “Open Election 2012,” a new partnership  between Mozilla, PBS NEWSHOUR, the Corporation for Public Broadcasting  (CPB) and Participatory Culture Foundation.

Open Election 2012 will showcase how new open web technologies and citizen participation can make election coverage more accessible to diverse audiences, and provide new ways to engage with the news.

Adding context and interactivity with Mozilla Popcorn
Throughout the election, PBS NEWSHOUR will also use “Mozilla Popcorn,” a new HTML5 media tool Fast Company recently called “the future of online video.”

Popcorn makes it possible to pull other content and context from across the web right into the story, providing new ways for viewers to interact with video news.

Engaging and inspiring audiences
“It is part of the mission of public media to make our content available to everyone,” explained Hari Sreenivasan, Correspondent and Director of Digital Partnerships for PBS NEWSHOUR.

“From Chinese to Dutch, the speech translation is a true service for those for whom English is a second language and the hard of hearing. We hope to engage and inspire audiences too often forgotten.”

Learn more

Shakespeare goes social: Mozilla Popcorn in the classroom

December 8, 2011 § 4 Comments

What light through yonder Popcorn-powered window breaks?

What can “social video” do for learning?

The hyper-talented Kate Hudson (co-founder of openjournalism.ca, 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!

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 Wired.com.

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 mozillapopcorn.org.

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

Where Am I?

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