当我在div中加载脚本时，为什么此功能停止工作？

Question

我正在使用“ plyr.js”视频播放器脚本。 当我独自打开页面时，所有内容都可以正常工作，但是当我将页面加载到另一个div中时（即，当我将video.html加载到index.html的div中时），该函数将停止工作...

关于如何解决的任何想法？

这是代码：

<link rel='stylesheet' href='https://cdn.plyr.io/3.4.6/plyr.css'>

<video class="video-fluid" id="player" poster="fotos/demo1.jpg" playsinline autoplay loop>
  <source src="demo1.mp4" type="video/mp4">
</video>

<button type="button" class="btn js-stop" id="stop">Stop</button>


<script src='https://cdn.plyr.io/3.4.6/plyr.js'></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {    
      controls = [];
      player = new Plyr('#player', { controls });
      window.player = player;
    });
    $("#stop").click(function(){
      player.stop();
    });
</script>

正如我提到的那样，代码本身可以完美运行，但是当我使用.load（“ video.html”）将其加载到另一个页面的div中时，停止按钮将不再起作用。

提前致谢！

Answer 1

MDN：DOMContentLoaded ：

当初始 HTML文档已完全加载并解析，而无需等待样式表，图像和子帧完成加载时，将触发DOMContentLoaded事件。

因此DOMContentLoaded仅触发一次，并且该事件将在使用.load("video.html")加载的html添加到DOM中之前触发，因此document.addEventListener('DOMContentLoaded',如果在video.html中添加了任何效果。

我完全不明白为什么在这种情况下为什么需要DOMContentLoaded事件侦听器。

如果您写：

<video class="video-fluid" id="player" poster="fotos/demo1.jpg" playsinline autoplay loop>
  <source src="demo1.mp4" type="video/mp4">
</video>

<button type="button" class="btn js-stop" id="stop">Stop</button>


<script src='https://cdn.plyr.io/3.4.6/plyr.js'></script>
<script>
    // document.addEventListener('DOMContentLoaded', () => {    
      controls = [];
      player = new Plyr('#player', { controls });
      window.player = player;
    // });
    $("#stop").click(function(){
      player.stop();
    });
</script>

然后， new Plyr仍应找到该元素，因为该元素是在执行脚本之前添加到DOM的。