How to get popcorn.js working on dynamically loaded content?

StackOverflow https://stackoverflow.com/questions/20579258

  •  01-09-2022
  •  | 
  •  

Question

I've followed this tutorial:

http://popcornjs.org/popcorn-101

Tutorial Code

<!doctype html>
<html>
  <head>
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
    <script>
      // ensure the web page (DOM) has loaded
      document.addEventListener("DOMContentLoaded", function () {

     // Create a popcorn instance by calling Popcorn("#id-of-my-video")
     var pop = Popcorn("#ourvideo");

     // 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>
    <video height="180" width="300" id="ourvideo" controls>
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
    </video>
    <div id="footnotediv"></div>
  </body>
</html>

And can run this locally.

In Firebug, I see the footnote div update from:

<div style="display: none;">Pop!</div>

to:

<div style="display: inline;">Pop!</div>

On a live site however, I am loading my page html from a MongoDB database via Ajax and the footnote display functionality doesn't seem to be working.

Thinking this might have something to do with needing to 're-initialise' after the content has loaded, I've added the popcorn.js functionality to a function called on click:

Function

<script>
function myPopcornFunction() {
var pop = Popcorn("#ourvideo");
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
pop.play();
}
</script>

Call

$(document).on("click","a.video", function (e) {
// passing values to python script and returning results from database via getJSON()
myPopcornFunction();
});

This doesn't seem to have an effect.

No footnotediv content is loaded when the video plays.

The video is also not playing automatically.

It's hard to reproduce in jsFiddle with dynamic content, so is there a generic approach to ensuring popcorn works with dynamically loaded content?

Firebug Error on click

TypeError: k.media.addEventListener is not a function
Was it helpful?

Solution

It seems to have been a timing issue in that originally I had made a call to the myPopcornFunction() outside of the function which loaded the content (a getJSON() function). When I placed the call within the same block as the getJSON() function, things seemed to maintain their 'order' and popcorn could work correctly.

Before

$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
});
e.preventDefault();
myPopcornFunction();   // the call WAS here
});

After

$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
myPopcornFunction();   // the call is now HERE
});
e.preventDefault();
});

The myPopcornFunction() was the same as in the original post.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top