plug I'm also working on a video annotating web app. I've followed popcorn.js for a while and was never happy with their direction. I've focused more on having users generate textual comments, timelined to the video. You can demo it at

http://www.thevaldmans.com/quip

when the app is more fully featured and less buggy I'll submit it to hackernews. If you are interested in following the progress, email me (dave@math.ucsb.edu). Thanks!

Cool stuff. Reminds me a bit of how http://soundcloud.com does a similar thing with music. Check it out if you haven't, yet. It's a really well done solution IMHO.

Thanks! I agree, Soundcloud does have a pretty slick implementation. I've definitely tried to learn from their design. Viddler also has a similar feature, and more related to online video. I think what popcorn.js and these other tools are trying to do is pretty exciting. There's still lots of room for improvement.

Why dont't they have their own video use popcorn instead of showing a plain-jane video about how popcorn works in a practical context.

Bad marketing imho.

We do... http://popcornjs.org/

You should probably make an obvious link on the mozillapopcorn.org site to this demo.

Direct link: http://mozillapopcorn.org/

Still did not understand what good it is for. To put tweets and google map on a page?

The Popcorn library syncs events to a video's timeline. For example, I can show the profile, photo, and recent Tweets of each presenter/speaker in a video. And the plugins work with YouTube, Vimeo, and HTML5 videos. This was always possible in JavaScript, but Popcorn makes it simpler, putting interactive video into the hands of beginner programmers and small projects.

Here's a practical example using Khan Academy's library and Wikipedia articles to teach about the scale of the Solar System with Popcorn.js: http://vocamus.net/dave/?p=1309

I can't seem to find a link to this in action. I just find two blog posts about it.

That's not actually it. It's a sorta mashup of that, Khan Academy and Wikipedia, facilitated by Popcorn.js

Oops! Sorry! :)

Same, it seems they lost the link to the actual demo and just keep linking back to this blog post: http://mozillapopcorn.org/popcorn-in-the-planetarium-demo/ :(

The documentary "One Millionth Tower" was uses popcorn.js to pull in realtime weather data, Flickr photos, Google Streetview maps while you are watching the video. All of it seamlessly integrating into the documentary. Here is the code for the documentary: https://github.com/m4robb/one-millionth-tower

There are a lot more examples on http://popcornjs.org

Using Mozilla's Popcorn Maker webapp, anybody can make a similar project: http://mozillapopcorn.org/popcorn-maker/

Looks like an "authoring environment for making interactive video".

Exactly :D

It's to allow the page to dynamically interact with a video in many different ways.

This is a great library for doing product demos. Instead of having a video where someone clicks around your app, just create a voice over and have it actually click the links, drag the items, submit forms, etc. Especially awesome if your app is heavy on javascript (like a GWT application)

Can someone explain more about butter.js? On the project page there is no README.

PS: Popcorn looks really good!

From mozillapopcorn.org: "butter.js, an API supporting our Popcorn Maker app and any other apps that use popcorn".

Thanks for the reply! Let us hope they document it soon! =)

Here's another example of Popcorn in action. It's used on the people's choice awards website to bring in celebrity content from Freebase synchronized to when the announcers mention them: http://search.peopleschoice.com/v/26948149/bill-paxton-prese...

I had no idea how far HTML5 multimedia support had progressed until I saw this post. Nice find!

The two examples i've seen is pretty good. But I find it extremly annoying when I have to look at two things. You kind of have to pause..

Good to have. But for me not very practical. I think I have to rewatch the video to look at the comments/infos most of the time.

mozilla is upto awesome stuff again!