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

Stack Overflow用户

提问于 2013-12-13 19:08:20

回答 1查看 1.2K关注 0票数 0

我遵循了本教程：

http://popcornjs.org/popcorn-101

教程代码

<!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功能添加到一个名为单击的函数中：

函数

<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中进行复制，那么是否有一种通用的方法来确保爆米花能够动态加载内容呢？

萤火虫点击错误

TypeError: k.media.addEventListener is not a function

mongodb

jquery

popcornjs

音视频体验馆免费体验试用

一站式·全方位体验音视频产品，所见即所得，30分钟即可上线同款能力

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-12-14 00:18:26

这似乎是一个时间问题，因为最初我在加载内容的函数(一个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();
});