To get started, we showed a series of popcorn demos. The project is always much easier to understand when you see the different ways people have applied it – watching the evolution of demos from things like the Rebellious Pixels semantic remix to the recent Know Your Exit creation had lightbulbs going off around the room.

We wanted to have participants move into creation as fast as possible – to facilitate this, Brian Chirls created the “Popcorn Boilerplate” project: a bare-bones HTML page featuring popcorn. For content, we had everyone work with Episode 4 of Kirby Ferguson’s fantastic Everything Is A Remix series.

Before lunch, Popcorn community members Brian Chirls and Cole Gillespie led folks with a background in Javascript through the basics of using the library and creating custom plugins. Those with no prior coding experience were brave enough to test drive the alpha version of Popcorn Maker.
</p

After we had recharged with some food, we broke into several groups in order to get down to some serious webmaking. Group 1 wanted to apply their newfound knowledge of the Popcorn.js library to a unique creation. Group 2 decided to use Popcorn Maker to try and augment one of their own videos. And Group 3 wanted to ideate a web native project in more detail with wireframes and a project spec.

The first order of business was paper prototyping – each of the 3 groups began mapping out the experience they wanted to create. Brian and Cole each acted as the “help desk”, answering questions that hackers would bring. Folks using Popcorn Maker pushed through the bugs to upload their own videos, apply events, and export their code. Before long, far more time had flown by then we realized. Those who were determined to get a demo done began a furious hack to the finish line.

At our closing circle, we showcased the results of the day. Stephen Johnson, who’d come to explore the potential of using Popcorn at British Telecom, made a custom Popcorn.js plugin to sample frames from a movie to populate a collage. Try it out here

Lawrence Job, a frequent hacker at Young Rewired State, paired up with Chris Hutchinson, a Birmingham student whose website won the Guardian’s “Website Of The Yea” at the Guardian Student Media Awards. Together they hacked up a commenting system that uses websockets to allow multiple people to create comments using popcorn. Try it out!

Kat, who produces video content for the Salvation Army, realized how useful Popcorn Maker can be to non-profits. She augmented one of their videos using the Pop Up Video template, to add the name, picture and twitter page of a local MP who had attended one of their events (scroll to around 0:31 seconds in the video). She also added a link to the Salvation Army’s donations page (1:32), a simple but powerful use of “hypervideo”. Techniques. Watch her video!

What We Learned

Working with a shared video was definitely something we’ll continue to do in future learning labs – it lets participants focus on creating popcorn experiences rather than video production. We’d like to take the concept further and provide a series of simple exercises that everyone in the group can explore right away. The popcorn boilerplate was a great start, but we need a series of simple recipes everyone can follow, regardless of coding skill. Further on that point, we chose to separate participants into those who knew JavaScript and those who don’t , which in hindsight goes against our cross-disciplinary working model. Many participants let us know in the closing circle that they would have enjoyed the chance to “cross the aisle” and work with people of different skill sets and experiences. It’s on us to design a flow for the day that allows coders and media makers to be working together for the entire time.

We also learned that the future for these types of events is quite bright – that there are lots of people eager to not only learn technologies like popcorn, but who want to challenge themselves to roll up their sleeves and start hacking. A big thanks to those who gave up their Sunday afternoons to hack with us and kickstart the Popcorn Learning labs!
</p<

Mozilla is partnering with the world’s leaders in documentary film to launch The Living Docs Project. The partnership will produce events, projects and code aimed at revolutionizing Web-based documentaries, using the power of new open Web tools like Mozilla Popcorn to create new ways of telling stories online.

Living Docs is a partnership between Mozilla, The Tribeca Film Institute, The Center for Social Media at American University, ITVS and BAVC. The Tribeca Film Institute is one of the world’s leading funders of interactive documentaries.

Filmmakers and developers changing the face of storytelling

Living Docs films will apply the “hacker spirit” of open innovation to the world of documentary, using open Web technology, sharing code and resources, and releasing new iterations early and often.

“This is about the evolution of the documentary genre,” said Mozilla’s Brett Gaylor. “We’re bringing filmmakers and developers together to tell stories in ways that have never been attempted before.”

“As storytelling enters the 21st Century, we are inspired by Mozilla’s open-source ethos of collaboration, constant learning and iteration,” said ITVS. “These new ways of working require new skills, new teams and new aesthetics.”

Hot Docs hackathon

The first Living Docs hackathon will pair web developers and documentary filmmakers at the upcoming Hot Docs film festival in Toronto. The project is now seeking filmmakers with interactive projects to participate in the two-day sprint, which will be held April 28 and 29 at Mozilla Toronto.

Beta Internet Explorer 8 support

Thanks to the efforts of Scott Downe and Greg Kindel at RAMP, we have Popcorn.js working with Youtube in IE8 in addition to our supported browsers. Some plugins work, such as subtitle and footnote, and we will be adding support for more in the future. If you’re interested in adding support for your own Flash players to Popcorn.js, please read the documentation.

update: It appears that as of 1.2, we are now passing all Internet Explorer 10 tests, as well!

Allow content to remain after ended

The behaviour of plugins has been enhanced to give authors more control over the life-cycle of displayed content. Authors may now set the value of “end” to either false or undefined, which will cause the content to remain forever. Previously, unspecified “end” properties would default to the duration of the video. This change will allow plugins to stay active after the media has ended.

Popcorn.smart player

This new add-on will load Popcorn with the correct player based on the URL. Popcorn authors will now be able to add a youtube, vimeo, or native html5 media file and have Popcorn call the right player. See the documentation.

Deprecated methods

We have deprecated the following methods:

• listen (now “on”)
• unlisten (now “off”)
• trigger (now “emit”)
• exec (now “cue”)
• The functionality of each old and new method is exactly the same, just with a shorter alias.

Grab bag

• Added Rdio plugin
• Added Popcorn.removePlayer
• Added loadedmetadata, loadeddata, canplaythrough, and ended events to Youtube.
• Fixed Youtube autoplaying on load
• Moved development to http://github.com/mozilla/popcorn-js
• Moved Popcorn.parser, Popcorn.player, and Popcorn.locale out in their own modules
• Updated test suite to QUnit 1.3

Head over to our downloads page or fork us on Github to get started with Popcorn 1.2!

What is Popcorn?

Popcorn is a Mozilla project to make video work more “like the web.” We make open source software for both developers and storytellers to seize on the possibilities of HTML5 video.

Popcorn is a framework to synchronize web media with any content or service on the web. Developers should check out Popcorn.js, a JavaScript library for web developers and Popcorn Maker, alpha-software that lets anyone create interactive HTML5 video without writing a line of code.

Come meet us at SXSW!

Saturday March 10th
Mozilla, the MIT Media Lab and the Knight Foundation will take part in an “Innovation Fair and Reception” showcasing open technologies for journalists.

Sunday March 11th
Mozilla Director Brett Gaylor will be with friends on a panel at the Film Conference pondering this heavy duty question: Does HTML5 Offer a Montage Moment for Cinema?.

That evening, the Popcorn team returns to the Mozilla Mothership at the SXSW mega event #FEED. Art hackers Beak Labs will be creating a Popcorn installation live on site.

Monday March 12th
See which side of the smackdown Mozilla’s Ben Moskowitz lines up on in the Interactive panel HTML5 for Film: Bleeding Edge or Leading Edge.

Stop by the SXSW tradeshow to see what Popcorn contributors RAMP have been up to. Head to booth 341 where RAMP is showcasing a number of new Popcorn applications and integrations with their core MediaCloud technology for creating and managing timecoded metadata. Tuesday night, as part of the SXSW Block Party, RAMP will have
beers and snacks in the booth as well as free Popcorn t-shirts.

The Living Docs Project

Mozilla is partnering with the world’s leaders in documentary film to present The Living Docs Project, a series of events, projects and code to support the creation of web docs. Living Docs films apply the hacker spirit of open innovation to the world of documentary by using open web technology, sharing code and resources, and releasing early and often.

Living Docs is a partnership between Mozilla, ITVS, The Tribeca Film Institute, BAVC and the Center for Social Media at American University.

At SXSW, we’re announcing our next hackathon, where we’ll pair web developers and documentary filmmakers at the Hot Docs Film Festival. If you’re a filmmaker with an interactive project,sign up here for this unique opportunity!

And check out this video from the last Living Docs hackathon:

Find out more at www.livingdocs.org.

Hold an event in your home town

Interested in hacking with Popcorn in your hood? Popcorn Learning Labs are a great way to build a community of like minded hackers. Read about these events here, then get in touch.

Help us develop Popcorn Maker

Popcorn Maker is an exciting open source project that needs help from contributors like you. Read about our Roadmap here and find out how to help.

Get in touch

We’d love to hear from you! Let us know if you’ve used Popcorn, want to know more, or would like to collaborate.
popcorn@mozilla.com

Popcorn Maker has hit the 0.2 milestone.

Popcorn Maker will empower everyone to make interactive video for the web. Read about the vision and our roadmapping efforts. If you want to help out, have a look at the open tickets in Lighthouse.

Happy 0.2 Birthday, Dave

Last week, the Popcorn team wrapped the 0.2 milestone toward Popcorn Maker, cheekily codenamed Ghostbusters. (This made for a great release party, with a special screening of the movie and a Stay Puft-themed cake).

This release encompassed 104 tickets, which is pretty intense. Major props to Bob Richter, Jon Buckley, Scott Downe, Chris, Dave, and the rest of the CDOT crew. And this is just getting started.

Because this is a release focused on rewriting Popcorn Maker’s foundations, we’ve skipped deployment for 0.2. But you can play around with the new UI in a sandbox here. And you can also check out the changelog.

What’s new?

A lot has changed. I’ll call out 4 things in particular:

1. Stronger software foundations

Butter is the software development kit for Popcorn Maker and other Popcorn-powered web apps. In the past, Butter was tucked into the Popcorn Maker app, which loaded HTML templates in an iframe and communicated with them in a somewhat unreliable way.

We want the foundations of Popcorn Maker to be strong. So we’ve re-factored Butter to live inside user templates. This makes for much more elegant code and reliable interactions.

A cool side effect of this is that any page can be turned into a Popcorn Maker template by simply including butter.js.

2. New and improved UI

Popcorn Maker UI, version 0.1

Popcorn Maker UI, version 0.2

Because Popcorn Maker is a WYSIWYG tool, it’s important that users have as much screen real estate as possible to visualize their projects.

So we’ve shrunk the tray to the smallest practical size. It’s 25% thinner than before. And we’ve moved the playhead to the status bar, so you have access to the whole timeline even when the tray is minimized.

We’ve added a layer of polish all around—lots and lots of nice touches. Track events are now distinguished by color and have more pleasing regions for moving and stretching. Track events are now selectable, which will pave the way for multiple event selection, copy+paste, and undo operations. In all, this makes the app feel much more tangible, and approaching the level of polish you’d expect in a native app.

3. Droppable regions

Popcorn events are now drag-n-droppable.

Popcorn Maker now lets your drop a Popcorn event (say, a map) directly onto the page target.

This is a small change that will make the app many times more usable. We’ll be introducing an even nicer “Add Popcorn” flow in the next release. And we’ll be exploring other drag-and-drop concepts over the year (like dropping a video into the page to upload).

4. Accounts and saving

Thanks to Cornfield—the Popcorn server—this is the first Popcorn Maker release with server-side project storage. We have initial support for creating accounts with BrowserID and saving project data to the cloud.

Cornfield needs to be made more secure, so we have no public demo just yet. But if you’re inclined, you can clone Butter and Cornfield and test this locally.

Next up: 0.3, “Breakfast Club.”

This month, we’ll be rolling up all this work into a version of the app that will stand on its own. The 0.3 release, codenamed Breakfast Club, should be approachable by users and enable top-to-bottom project creation, saving, and publishing.

This release will introduce a temporary template loader that will tide us over between now and June, when we stand up a proper Django backend.

It will be a big challenge to coordinate all these things—Butter, Cornfield, the template loader, templates and documentation. But Popcorn Maker is getting more real—and more powerful—every day. Exciting stuff.

This post was created with Popcorn Maker.

We are hard at work on Popcorn Maker.

Currently at version 0.1, Popcorn Maker is a little crufty. But Popcorn Maker 1.0 will hit hard in November of this year.

Popcorn Maker 1.0 will empower you to make cool web-based media, whether you’re a beginner or pro. With over 20 plugins—ranging from Twitter to Google Maps to video processing—you’ll be able to stitch up a stylish video that’s “woven” into the web. And, of course, it’s 100% free and open source.

Users will be able to publish and share their creations on their blog, Twitter, or Tumblr (or just grab the code). And the app will reward them for learning more advanced HTML, CSS, and Javascript skills.

When it hits critical mass, Popcorn Maker will be an engine for community innovation in open video.

I blogged about the Popcorn Maker vision in July of last year. Since then, it’s moved to the center of the Foundation’s “Maker” strategy for 2012.

Roadmapping

Last week—thanks to four intense, caffeine-fueled days—the project team arrived at a pretty solid roadmap and vision for Popcorn Maker. Our issue tracker also includes several hundred new/reassigned bugs, mapped against cheeky code names for each release. (We’ve chosen a blockbuster movie motif, so look forward to 0.2 Ghostbusters, 0.3 Breakfast Club, 0.4 Top Gun, 0.5 Pulp Fiction, 0.6 Terminator, 0.7 Amelie, 0.8 Rushmore, 0.9 Wrath of Khan, and finally, 1.0—Matrix.)

What’s new? A heightened level of ambition, matched with increased rigor to get it done.

Starting in 0.7, you'll be able to embed a viral Popcorn player on third-party sites.

Importantly, we’ve developed a working theory of how Popcorn can become a webmaking virus, which Brett Gaylor has blogged about here.

All of this is reflected in a shiny vision document, which is a work in progress (we’ll share next week). We’ve hashed out some user stories, gotten granular on the technical challenges, and imagined how the UI/UX might work. We need to kick the tires a bit before we’re confident in both the user stories and the roadmap, but we’re close.

We’d love to have your feedback in our Lighthouse issue tracker. (And, as always, we’d love to hear your template ideas! Feel free to create a ticket and let us know what’s on your mind.)

Here’s a look at some of our thinking.

Editor UI

Most users will experience the app as a special editor tray that sits on top of the project you’re working on (Popcorn Maker is a WYSIWYG tool). We need to get the editor UI/UX right. It needs to be compact but not constraining.

We’re moving event editors to the tray (in lieu of floating windows) and making it more intuitive to add Popcorn events to a page (just drag and drop onto the page target).

To make the app more versatile, we’ll offer a simple CSS editor UI to change your styles, without isolating you too much from the actual CSS:

Popcorn Gallery

The life-force of Popcorn Maker will be the Popcorn Gallery, which will let contributors share templates that others can build on. Call it the “WordPress.org effect.”

Plugins

You can use any popcorn.js plugin in Popcorn Maker. Even write your own.

Last but not least—plugins. Popcorn.js plugins are what make Popcorn Maker magic. We’re currently planning on supporting the following plugins, each with a pleasing editor UI (these are subject to change): Image, Video, Webpage, Wikipedia, Attribution, Media control, Apply class, Google map, Open Street Map, Chroma, Video effects, 3D object, Processing, WordRiver, PDF, DocumentCloud, Twitter, Facebook graph, Flickr.

One of the coolest things about Popcorn Maker, though, is that it will support every Popcorn.js plugin through a default editor. And plugin authors can create editor UIs for their plugins. In other words, the project is intentionally modular, so the Popcorn.js community can help us build out the functionality of the app.

As the community grows, the app becomes more powerful.

Seriously. Check out Seriously.js, then read that again.

Roadmap—want to help?

It’s going to be a hard sprint. But it’s super plausible, especially with Bobby Richter, Dave Humphrey, and the brilliant students of Seneca’s CDOT at the wheel. Here’s our roadmap, which will likely change a bit before we freeze it this month. Want to help? Join #popcorn in irc.mozilla.org, or join our mailing list.

“A meme is an idea that behaves like a virus–that moves through a population, taking hold in each person it infects.” – Malcolm Gladwell”

We need Mozilla Popcorn to become a virus.

Hear us out here.

In our early iterations of Popcorn Maker, we’ve been tackling the problem of how to make it easy for non-programmers to create Popcorn experiences. It remains the central focus of the project, and we’ve fleshed out our User Stories to imagine the full experience that a user might have. Tthese stories have informed the foundational changes to Popcorn Maker that Ben outlined in a recent blog post.

During our Popcorn Maker sprint, we put a lot of thought into imagining how our users’ creations will get shared and disseminated on the web. Ben has blogged about how Popcorn.js is a gateway drug to learning JavaScript (Also of the good sort. Stay with us). Similarly, we want Popcorn Maker to be a tool for injecting the Maker meme onto the web.

Fork my meme

To do this, we’ll need to do a few things. First, we need to make it easy for Popcorn makers to embed their creations on their own blogs, Tumblrs and websites. This means offering <iframe>embeds.

More interestingly, we want to give viewers the ability to fork others’ Popcorn productions. If you’ve watched Jonathan MacIntosh’s Buffy Vs Edward pop-up video remix, for example, wouldn’t you love the ability to easily clone his creation and add to it?

Each Popcorn creation needs a post-roll that offers viewers the ability to 1) Replay, 2) Share and embed, and 3) Fork this creation.

Popcorn Gallery

To build WordPress-like community scaffolding, we need the ability for every single creation to be made available in the Popcorn Gallery. When users choose to [Share] from Popcorn Maker they have an option to share to the Gallery that is checked by default.

While the Gallery will favour our default templates, it will become a jumping off point for new creators to get started with Popcorn. It will solidify the notion that creating on the web is generative. The act of creation will start by building on someone else’s work.

We think Popcorn will be a good bug to catch. Like getting the chicken pox when you were a kid. Or maybe more like taking an interest in photography. We’re sure this is the right metaphor.

Note: knock knock jokes, box stores and lolcats were all considered as alternatives while titling this post. Go meme or go home.

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.

Of course it’s great to see another example of Popcorn in the wild, but this is a use case we had never before considered. Using Popcorn.js to show synchronized interactive content, the page explains addons, what kinds of addons there are, and how a user can use them in Firefox.

Being Sherlock

Such an elegant use of the library deserves a little investigatory work. Since the authors of the many pieces of user-facing Firefox content do such a good job, it may not be immediately obvious that the addons about page is made of the web. Nevertheless, because it is indeed a webpage, I can right click to learn more, and open up the page in a new tab to isolate it.

Without flirting too much with a tangent about the merits of the Web Console, finding out that the page contains an instance of Popcorn is pretty easy:

1. Press Ctrl, Shift and K altogether to bring up the Web Console.
2. Type in Popcorn — which should auto-complete even before you have typed Pop — and press Enter.

Right away, without digging through HTML for a script tag, we can see that Popcorn.js is included on the page somewhere. But, we can do more than that:

1. After starting the video, try typing Popcorn.instances into the Web Console. It should report back with a large blob of text, which is actually an array containing Popcorn objects.
2. You can see the events that are going to occur during the video by typing Popcorn.instances[0].getTrackEvents(), which should return another blob — an array of Popcorn events.
3. Similarly, by trying commands like Popcorn.instances[0].getTrackEvents()[0].start, or Popcorn.instances[0].getTrackEvents()[0]._natives.type you can see when the first event will start, and what plugin type it is respectively. Feel free to copy & paste.

By poking around in a similar fashion, I was able to discover that the addons page makes use of the code plugin to add and remove CSS classes from elements on the page. This approach lets the video change the visibility and interactivity properties of the information bar’s constituent elements.

If this bit of detective work caught your attention, we’re only where the rabbit hole begins. In fact, there’s a whole API to discover and play with (recent documentation update courtesy of another CDOT student and Mozilla hacker, David Seifried).

Feeling the Effects

Needless to say, it was surprising seeing comparatively excessive usage stats on the popcornjs.org server, as throngs of people visited the addons about page:

Luckily, Jon Buckley, and Rick Waldron (another passionate Popcorn contributor from Bocoup) were able to advise the people managing the addons website to pull the server out of accidental DOS territory.

Article source: http://blog.robothaus.org/2011/12/22/popcorn-dot-js-all-grown-up/