为什么当我在 div 中加载脚本时此函数停止工作

Question

我正在使用"plyr.js"视频播放器脚本。当我自己打开页面时，一切都很完美，但是当我将其加载到另一个div 中时（即当我加载视频时.html在我的索引.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之前触发，因此如果将其添加到video.html中，则该document.addEventListener('DOMContentLoaded',将没有任何影响。

我非常不明白为什么在这种情况下需要那个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 的。