Popcorn.js Walkthrough

Popcorn.js, which I wrote about recently, is an infant javascript library that allows film makers to better showcase their videos on the web using html5’s video element. Using popcorn, directors can incorporating social media and integrate several features such as subtitles and credits that may be beneficial in the context of the web. Although typically, javascript libraries are written for programmers, popcorn can be configured with less technical knowledge solely by using xml, documented here.

You can view a demo we built for the Mozilla Summit here (best in Firefox)

Setup

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

index.html

<script src="popcorn.js"></script>

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:

index.html

<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.xml

<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.

Notable Features

Social Integration

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.

---

Credits

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.

---

Subtitles

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.

---

Accessibility

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.