You can view a demo we built for the Mozilla Summit here (best in Firefox)
Note: Version 0.1 of popcorn.js has just been released, and the library is not even close to stable. If you have specific issues you’re having, talk to us at irc.mozilla.org/popcorn.
Setting up popcorn is really easy, and requires only basic knowledge of html. First, download popcorn.js and include it using
Next, you have to tell popcorn which video it should care about by setting its data-timeline-sources attribute. Your video should look something like this:
<video src="video.ogv" data-timeline-sources="popcorn.xml"></video>
How to use popcorn
Popcorn is very simple to use, and is completely managed through the xml file addressed earlier.
Popcorn focuses heavily on the video’s timeline. Nearly every element of popcorn has an ‘in’ and ‘out’ method that tells popcorn when the feature should be visible on the page. The syntax for these methods is hours:minutes:seconds:frames. For example, two minutes three seconds would be 00:02:03:00.
A basic example of popcorn that requires no additional html elements would be implementing subtitles. The syntax to do so would be:
<popcorn> <subtitles language="en" align="center"> <subtitle in="00:00:00:03" out="00:00:01:06">All right let's take a look and show me some</subtitle> <subtitle in="00:00:01:06" out="00:00:03:00">of the neat things you can do on the internet</subtitle> </subtitles> </popcorn>
This is just one part of popcorn, for further information, view the xml specification.
Popcorn has strong integration with social media sites such as Twitter, Tumblr, and Wikipedia. Each service has slightly different syntax and variables, view the xml documentation for more details.
Hierarchical credits, which automatically play at the commencement of your video, are automatically generated by popcorn.js. Currently, credits are coded into the library, but they will soon be implemented into the xml.
Subtitling, I feel, is perhaps the most interesting facet of popcorn.js. The credits used in popcorn.js evolves from my earlier, overly-animated work.
Although often ignored, accessibility is extremely important, and can broaden your target audience immensely. Those with hearing disabilities can understand the video’s contents by reading it, and the subtitles can be translated in realtime using the wonderful Google translate API. Furthermore, your video’s content is stored as text, making your html more accessible to search engines than flash alternatives.
I’m really excited to see how popcorn matures. While content producers have done amazing things with video on the web, browsers have lagged behind. A long overdue push for accessible video is underway, and popcorn will advance the effort.