I heard about popcorn.js for a while, but did not have a chance to try it out. When the video of one of my talks became available, I knew I found a nail for this lovely hammer: I'll use popcorn.js to synchronize my slides to the video!
It only took a minute to embed the vimeo video. Next I wanted to change the size, so I added style="width: 160px; height: 120px" to the div container. No video. Baffled, I scoured the web for popcorn.js demos, and compared the source code with mine. By process of elimination I discovered that my html5 slides was to blame. The body tag has display: none so the unstyled articles tags do not show, but this means when popcorn.js cannot measure the size of the div container, it got zero width and height. As a work around, I added document.body.style.display = "block" after the html5 slides are initialized, but before I create the popcorn object.
Next I annotated the slides with timings from the video. I extracted the timings and use the Code plugin to update the slide. The first jump worked. But when I added a second one, the slides were no longer moving.
My code looked like this:
for (var i = 0; i < articles.length; ++i) {
var article = articles[i];
var timing = getTiming(article);
pop.code({
start: timing,
onStart: function(options) {
gotoSlide(i);
}
});
}
After a lot of experimentation, I finally got it to work:
for (var i = 0; i < articles.length; ++i) {
var article = articles[i];
var timing = getTiming(article);
pop.code({
start: timing,
slideNumber: i,
onStart: function(options) {
gotoSlide(options.slideNumber);
}
});
}
Notice how I stash away the value of i in the hash as slideNumber and grab it from the options inside the onStart callback. What happend was that when I use the variable i directly in the callback, its value has been changed by the for-loop when the callback is executed, so it ended up calling gotoSlide(article.length), which is not valid.
My slides now have a small video playing in the top right corner, which auto-advances the slides when you start watching. Have a look and let me know what you think!