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.