0

for a project I have to use Kirby and Popcorn.js together, I already used the two separately and had no problem, but now I have to generate subpages that contain different set of videos and subtitles. The problem is that I put the scripts in the header and of the template which use snippets of my popcorn video and footnote.

The problem now is that I have this problem in the console :

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)

Did that in the snippet :

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

And just copy/past the exemple in the head :

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);

The video runs, there is no problem with that, I just don't see the subs. I tried to put the scripts in the end of the body instead of puting it in the head, but nothing.

I'm using Mamp in localhost, Is it something like that in cause ?

0 Answers0