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

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

1 个答案: