INSIGHTS | March 26, 2013
On Our Radar: Popcorn.js
The work we do for our clients and their customers requires MCD to keep a constant eye out for new ways to engage and connect in the digital, mobile and real worlds. As a result, MCD Labs continually tracks trends, emerging behaviors and new opportunities. One technology solution on the radar that has gotten us thinking is Popcorn.js.
Popcorn.js is an HTML5 media framework written in JavaScript that is part of Mozilla’s (maker of the Firefox browser) Popcorn Project. As a solution, Popcorn.js has been around for a couple of years (we first added it to our list of things to watch in 2011), but has recently matured into something we think is worth closer consideration.
Popcorn gives developers the ability to use the timeline of a video as the “spine” of a story: allowing different media types to interact with the video based on where it is in the timeline. Want to show a map in context as the video shows a specific place? Popcorn. Add a Wikipedia entry for a topic at the same time a character is discussing it? Popcorn. Sync a music file from Soundcloud during an interview with a musician? Popcorn. Live tweet-stream of a #hashtag while a video is playing? Popcorn. Content and functionality elements can be included as overlays when the video is full screen or as part of the page experience with each content element in its own space on the page.
While researching this post, we reached out to our friends at Murmur (NYC-based studio that pioneers new forms of immersive storytelling/cinema) who have had some success using Popcorn.js on a recent project for the indie band Jets Overhead’s new music video, "What You Really Want." Co-founder Mike Knowlton, who is also the CTO of the transmedia/immersive storytelling community StoryCode, was kind enough to give us his perspective on working with Popcorn:
Tell us a little bit about the project, "What You Really Want?"
"What You Really Want" is a social music video for the indie-rock band Jets Overhead. It was created by inviting fans to submit a photo of them holding up a piece of paper telling the world what they really want. From those submissions the band selected a final set of photos for a traditional linear version of the video (this premiered on RollingStone.com). However there is also an interactive version that lives at tellmewhatyoureallywant.com. With the interactive version you can decide which of the fan-submitted photos you would like to see in the video. So in other words, you create your own version of the video which you can also share with friends.
What was it about the project that helped you choose Popcorn.js?
We wanted to do this project using HTML5 Video and Popcorn.js seemed like a natural choice for what we were trying to do. We needed to implement timeline-triggered animations (basically we hide the video during the chorus and display the images, then toggle back to the video in the verses). Popcorn.js provided a nice framework of functionality that we could hook into in a pretty straightforward manner.
What was the most difficult/challenging part of using Popcorn.js?
Like any time you try something new, taking that first "dive" into the deep end was the most challenging aspect. Most times these new, open-source technologies don't come with manuals. So you need to just dive in, roll up your sleeves, and go figure it out.
Were there any surprises working with Popcorn.js?
I was expecting some real headaches dealing with cross browser issues (specifically Internet Explorer). I had explored Popcorn.js about a year ago and ran into some issues with it on IE. But with subsequent builds and versions this issue has gone away. Honestly, my main surprise working with Popcorn.js was how painless it was.
Would you use Popcorn.js again?
Yes, totally.
From a UX/Design perspective, using Popcorn requires serious thought about the total presentation of content (things can get busy real fast) and because it is a combination of video and other elements there are serious issues to consider when thinking responsive - right now it is a desktop/tablet experience at best. As an open source project with a community of developers behind it, the documentation could use some work and the codebase is still evolving. More kinks are being worked out with each implementation as the creative community continues to stretch Popcorn’s boundaries.
We think the real key for Popcorn’s use is in creating experiences (like Murmur’s "What You Really Want” presentation) where the video is in balance with the other elements that are being synced. Don’t just enhance the video presentation with overlays, factoids, extras and Easter eggs, but have the video and other elements work together to make something more compelling than just the video by itself. A couple reference architectures for Popcorn.js integration might include:
1. Enhanced Registration
Particularly with clients in the financial services space, some products/services require a lot more time and effort than entering a couple of fields and hitting SUBMIT. With Popcorn, an instructional video can be synced to highlight specific sections of the registration path as the user fills out a form:
The video can highlight specific sections of an online form while providing context for the user’s task as the video plays.
The user can click a tooltip and the segment of the video specific to that tip can play, providing instructions and information.
Additionally, Popcorn could be used while their account or service is being configured to entertain/upsell/cross-sell the user.
2. Enhanced Purchase Path
For products and services that are very complicated, with multiple attributes and variables, an enhanced purchase path including video (or audio) that provides context could be a more compelling user experience.
3. The Live Web Plus
Festooning pages with social widgets and feeds is common these days but synching a video presentation to a #hashtag could provide a real-time view into an event or moment.
4. Cross-Channel Storytelling
Using Popcorn.js to enhance a cross-channel storytelling effort (where the narrative takes place in multiple media like a website, text message, app, comic book, video, podcasts, etc) might include connecting a series of "triggers" to the time-code of a video or audio presentation. These triggers could include sending a text message to a registered user when they get through a specific part of a video, connect APIs (like Twilio) to video experiences where a certain part of the video triggers a phone call to a user or having a specific moment of the video Facebook post to the user’s wall.
A great part of the popcorn community is PopcornMaker (formerly known as Butter). PopcornMaker is a WYSIWYG (what you see is what you get) visual builder for Popcorn that let us newbies and non-coders get a sense for what can be done with the framework by remixing others' presentations or making their own from scratch.
With Google’s purchase of YouTube in 2006, video became table-stakes for brands on the internet and Popcorn is a natural step forward in that evolution. Popcorn is something we will be paying attention to and likely seeing more of in the future.