First steps with Popcorn.js

Mozilla’s Popcorn.js enables developers to manipulate content in relation to a video: display/hide elements, manipulate a timeline, or simply execute arbitrary code. The advantage this technique has over simply timing the triggered events, is that it is fully synchornized with the video: if you go back in the video, content updates correctly. Here, we’ll see how to enrich a run-of-the-mill corporate video, to provide contextual information for interested visitors.

As demonstrated at ap-popcorn-demo.heroku.com, [edit: the video has been removed by the user] Popcorn.js allows you to easily enrich any video and manipulate a web page to display the information most suitable in the given context.

As you can see in the gist, I’m only doing 3 basic things in this demo:

• adding information to the timeline, linking to additional information related to content featured in the video ;
• display images for products features in the video ;
• executing arbitrary javascript code.

It is important to note that although the arbitrary code only does something mundane like changing the background, it could do anything at all. In other words: let your imagination run free !

Would you like to see more Elixir content like this? Sign up to my mailing list so I can gauge how much interest there is in this type of content.