Как заставить popcorn.js работать с динамически загружаемым контентом?

Question

Как заставить popcorn.js работать с динамически загружаемым контентом?

0

Я следовал этому руководству:

Код учебника

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

user1063287 14 дек. 2013, в 04:38

Источник

Теги:

jquery

mongodb

popcornjs

1 ответ

Ещё вопросы

user1063287 · Accepted Answer · 2013-12-14T06-40-00.000Z

Кажется, что это была проблема синхронизации, myPopcornFunction() что изначально я сделал вызов функции 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() была такой же, как и в исходном сообщении.