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

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

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>

Однако на живом сайте я загружаю 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
Источник

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() был такой же как в оригинальном посте.

Источник
Другие вопросы по тегам