Popcorn.js and Khan Academy

Last week Mozilla’s Bobby Richter and I spent some time building a demo of what’s possible with Popcorn.js’s new YouTube support.  Steven Weerdenburg has been working with me at Seneca’s Centre for Development of Open Technology over the winter, and among other projects, he wrote a bunch of player plugins.  In Popcorn.js, a player plugin is a wrapper around an object, script, etc. that changes its interface into that of an HTML5 media element.  It allows us to shim video-like objects, be they animations, custom timelines, etc. into Popcorn.js, and have them work just like the expected HTML5 video or audio element.  Steven has built player plugins for Vimeo, SoundCloud, and YouTube.

When we shipped YouTube support we knew that we needed a demo.  Obviously there is so much we could use now that YouTube works with Popcorn.js, but my mind went instantly to the Khan Academy videos.  As a professor and homeschooler I love Khan Academy and what they are trying to do (see Sal’s TED talk if you’re not familiar with the project).  There are many educators who have reached out to us with ideas and questions about using Popcorn.js in their teaching.  How could Popcorn.js augment and support a teaching tool like Khan Academy’s videos?

The answer is to use the media as a unifying narrative for a rich web experience, one that mixes visual and textual information, and turns the experience of learning from being purely linear into something that is both linear and interactive.  We often hear about how the web enables remixes, and we wanted to demonstrate an educational remix.  In our case, we wanted to mix the following:

• Khan Academy’s Scale of the Solar System video
• The incredible HTML5 planetarium demo built for Mozilla by Little Workshop
• Wikipedia articles on aspects of the solar system

We intentionally tried to write as little code as possible, while still giving a rich experience.  We put the planetarium demo in an iframe behind the YouTube video, and used jQuery UI to build a slide-out information panel (mouse over the left-hand side of the window).  We use Popcorn.js to drive the experience, automatically navigating around the planetarium, dynamically adding articles to the info panel, and moving and resizing the YouTube video as necessary.  The experience is equal parts directed learning (“here’s Mercury…”) and self discovery (users can manually navigate through the planets and go to the articles for more info).

There’s a lot more a domain expert could do with this method.  Neither of us are experts on the solar system, and our intent was to show how easy it was to take existing web and learning resources and mix them in order to create a more interesting learning experience with Popcorn.js.  We built this in a day, and we know that other educators could take it much further with more time.

If you’re interested in learning more, come say hi on Mozilla’s Web Made Movies mailing list or on irc.mozilla.org/popcorn.