如何让popcorn.js处理动态加载的内容？
如何让popcorn.js处理动态加载的内容？
提问于 2013-12-14 03:08:20
我遵循了本教程：
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回答 1
Stack Overflow用户
回答已采纳
发布于 2013-12-14 08: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();
});myPopcornFunction()与最初的帖子相同。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20579258
复制相关文章
相似问题
腾讯云开发者
