如何讓popcorn.js處理動態加載的內容？

教程代碼

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

在直播現場然而，我加載我的網頁HTML從MongoDB的數據庫通過Ajax和腳註顯示功能似乎沒有工作。

想這可能是與需要的內容加載後「重新初始化」，我已經添加了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中重現動態內容，那麼有沒有一種通用的方法來確保爆米花與動態加載的內容一起工作？

上點擊Firebug的錯誤

TypeError: k.media.addEventListener is not a function

來源

2013-12-14 user1063287

它似乎一直在一個時間問題本來我已經做出了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()是一樣的，在原來的職位。

來源

2013-12-14 08:18:26 user1063287

如何讓popcorn.js處理動態加載的內容？

回答

相關問題