0

对于一个项目，我必须同时使用 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>

只需复制/粘贴 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);

视频运行，没有问题，我只是看不到潜艇。我试图将脚本放在正文的末尾而不是放在头部，但没有。

我在本地主机中使用 Mamp，原因是这样的吗？

4

0 回答 0