Проблемы при использовании Kirby с PopcornJS - PullRequest
Новая
       65

Проблемы при использовании Kirby с PopcornJS

0 голосов
/ 12 октября 2018

для проекта я должен использовать Kirby и Popcorn.js вместе, я уже использовал оба отдельно и не имел проблем, но теперь мне нужно генерировать подстраницы, которые содержат различный набор видео и субтитров.Проблема в том, что я поместил скрипты в заголовок и шаблон, которые используют фрагменты моего видео с попкорном и сноски.

Теперь проблема в том, что у меня есть эта проблема в консоли: 

Uncaught TypeError: Cannot read property 'appendChild' of null
at init._setup (popcorn.footnote.js:64)
at init.<anonymous> (popcorn.js:2196)
at Function.Popcorn.addTrackEvent (popcorn.js:1446)
at init.pluginFn (popcorn.js:2000)
at init.Popcorn.p.(anonymous function).plugin.(anonymous function) [as footnote] (http://localhost:8888/myproject/assets/js/popcorn.js:2155:16)
at HTMLDocument.<anonymous> (project-1:98)

Сделал это во фрагменте: 

<div class="text wrap">
  <?php foreach($page->conference()->toStructure() as $conference): ?>
  <aside>
  <?php if(!$conference->vidurl()->empty()): ?>
    <iframe id="speaker" height="auto"
      src="<?= $conference->vidurl()->url() ?>">
    </iframe>
  <?php else: ?>

    <?php foreach($conference->vidfile()->toStructure() as $video): ?>

    <video id="speaker" height="auto" controls autoplay>
      <source src="<?= $page->url() ?>/<?= $video->filename() ?>" type="video/mp4">
      Your browser does not support the video tag.
    </video>

    <?php endforeach ?>
  <?php endif ?>
  </aside>
  <?php endforeach ?>

  <div id="footnote"></div>
</div>

И просто скопируйте / пропустите пример в голове: 

document.addEventListener('DOMContentLoaded', function () {
      var p = Popcorn('#speaker')
      .footnote({
        start: 0, // seconds
        end: 15, // seconds
        text: 'This video made exclusively for drumbeat.org',
        target: 'footnotediv'
      })
      .subtitle({
        start: 1, // seconds
        end: 15, // seconds
        text: 'this is a subtitle'
      }) 
      .play();
    }, false);

Видео запускается, с этим проблем нет, япросто не вижу подводных лодок.Я попытался поместить сценарии в конец тела вместо того, чтобы положить его в голову, но ничего.

Я использую Mamp в localhost, это что-то подобное в причине?

...