Hands on - Using popcorn.js to add a time-based footnote to your HTML5 video
Objective
Learn how to include the popcorn.js library in your web page and use its functionality via plugins
Background: The Popcorn Project
Popcorn is a project developed by Mozilla that includes a JavaScript library that lets you use the <video> tag to create time-based interactive media on the web. The project aims to bring together filmmakers and web developers by letting them merge their technologies. Popcorn has good documentation and lots of tutorials online to get started at a not too technical level.
With the popcorn.js JavaScript library, you can make things happen like: 10 seconds in, show a map of Paris; 20 seconds in, show my Flickr photos; add subtitles that can be translated to the viewers' language and a lot more! These kinds of things are called "events" and are represented in JavaScript code.
Here is a simple example of how we can extend the previous example to a expanded video experience. Notice how, besides the <video> tags, we also include a <div> with the id of "footnotediv", which is where we'll display a footnote on a particular moment in our video.
The first step to use the popcorn functionality is to include the popcorn.js library. This is what we do on line 8 in the code below.
What follows is a block of JavaScript code between <script> tags. Line 12 starts a statement that wraps around the popcorn code to make sure it is run when the web page has loaded. The first piece of popcorn code is line 15, where we create a popcorn instance that takes the id of the HTML video element.
The next part from line 18 results a specific time trigger. Using the variable "pop", we add a footnote using the footnote plugin. Between the curly brackets ( '{' and '}' ) we specify the essential parameters that are necessary to display the footnote correctly (to find our about which parameters are required, have a look at the Popcorn plugin documentation [http://popcornjs.org/popcorn-docs/plugins/ Here we choose to display the text "Pop!" inside the target with the id "footnotediv" from second 2 until second 6.
The final piece of code uses the 'play()' method to start playing our popcorn video as soon as the web page has loaded.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page 3</title>
<!-- load in the popcorn.js library -->
<script>
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {
// add a footnote at 2 seconds, and remove it at 6 seconds
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
// play the video right away
pop.play();
}, false);
</script>
</head>
<body>
<h1>Welcome</h1>
<p>This is my web page, featuring a popped video using the footnote plugin.</p>
<video height="180" width="300" id="ourvideo" controls>
</video>
<div id="footnotediv"></div>
</body>
</html>
Task
See the live demo of this page at http://jsbin.com/ifekul/latest and hit 'Edit in JS Bin' to access the source. Let's remix that example to include something more visual. We can trigger all sorts of content from our video timeline using the different plugins that popcorn.js offers. One of these plugins is the Image plugin that, ... lets you display images!
.image({
// start seconds
start: 2,
// end seconds
end: 6,
// optional link to when the image is clicked
// the url of the image that you want to display
// the id of the document element that the iframe needs to be attached to, this target element must exist on the DOM
target: "imagediv"
});
Also replace the footnote div with the following image div:
<div id="imagediv"></div>
Now hit 'Run with JS' on the top right. See that image of the mozilla drum popping up? Yay! Now go ahead and drop in a URL of any image you like and change when it is displayed. Got that going? Great! Have a look at the References chapter of this section to see how you can further explore the possibilities to extend web video in your browser.
