Question

我已经按照本教程进行了操作：

教程代码

<!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>

并且可以在本地运行。

在Firebug中，我看到footnote div更新：

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

为：

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

在实际网站上，我通过Ajax从MongoDB数据库加载我的页面html，脚注显示功能似乎不起作用。

认为这可能与内容加载后需要“重新初始化”有关，我已将popcorn.js功能添加到一个名为click的函数中：

功能

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

呼叫

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

这似乎没有效果。

视频播放时未加载footnotediv内容。

视频也无法自动播放。

很难在jsFiddle中重现动态内容，那么是否有一种通用的方法来确保爆米花与动态加载的内容一起工作？

单击

时出现

Firebug错误

TypeError: k.media.addEventListener is not a function

Answer 1

这似乎是一个时间问题，因为最初我调用了加载内容的函数的myPopcornFunction() 外部（getJSON()函数）。当我将调用放在与getJSON()函数相同的块中时，事情似乎保持了他们的“顺序”并且爆米花可以正常工作。

<强>之前

$(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
});

<强>后

$(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();
});

myPopcornFunction()与原帖相同。

如何让popcorn.js处理动态加载的内容？

1 个答案: