延迟加载并在视口中播放多个随机html5视频

Question

我正在创建一个网页，以同时播放多个html5视频。我添加了延迟加载脚本+仅可见脚本，因此在滚动时仅视口中的视频会加载和播放。看演示。

一切正常。每次刷新页面时，它将随机显示视频。当我向下滚动时，它将加载视频并播放，而当我向下滚动时，向上播放的视频将暂停。当我向上滚动回到刚才观看的视频时，它们将继续播放。是预期的。

但是有一个问题。当我向下滚动然后向上滚动时，视口上方的视频开始恢复播放，但是视口下方的视频不会暂停，而是继续播放。

我不知道该怎么做才能停止播放视口下的视频。在演示中，它可能工作正常，但是当我复制相同的代码并将其放在PC上的HTML文件中时，因此它在屏幕上仅连续显示3个视频，就会出现问题：视口下的视频一直保持向上滚动时播放。

这里是演示-请单击以查看完整的内容：

var bLazy = new Blazy({
  // Options
});


// Shuffles elements in a list

var ul = document.querySelector("ul"), // get the list
  temp = ul.cloneNode(true), // clone the list
  i = temp.children.length + 1;

// shuffle the cloned list (better performance)
while (i-- > 0)
  temp.appendChild(temp.children[Math.random() * i | 0]);

ul.parentNode.replaceChild(temp, ul); // copy shuffled back to 'ul'



$(window).scroll(function() {
  $('video').each(function() {
    if ($(this).visible()) {
      $(this)[0].play();
    } else {
      $(this)[0].pause();
    }
  })
});

ul {
  padding: 0;
  margin: 0;
}

*> :first-child,
*> :nth-child(2),
*> :nth-child(3) {
  padding: 0;
}

ul li {
  display: inline-block;
  padding: 70px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.8.2/blazy.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js"></script>


<ul>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://iandevlin.com/html5/rwd-video/parrots.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.nlm.nih.gov/web/documentation/TemplateDocumentation/video_files/IN_Intro-800.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://dev.opera.com/articles/introduction-html5-video/videos/windowsill.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.iandevlin.com/html5test/webvtt/v/upc-tobymanley.theora.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="http://henriksjokvist.net/examples/html5-video/video.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://iandevlin.com/html5/rwd-video/parrots.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.nlm.nih.gov/web/documentation/TemplateDocumentation/video_files/IN_Intro-800.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://dev.opera.com/articles/introduction-html5-video/videos/windowsill.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.iandevlin.com/html5test/webvtt/v/upc-tobymanley.theora.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="http://henriksjokvist.net/examples/html5-video/video.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://iandevlin.com/html5/rwd-video/parrots.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.nlm.nih.gov/web/documentation/TemplateDocumentation/video_files/IN_Intro-800.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://dev.opera.com/articles/introduction-html5-video/videos/windowsill.mp4" type="video/mp4"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="https://www.iandevlin.com/html5test/webvtt/v/upc-tobymanley.theora.ogg" type="video/ogg"> </video></li>
<li><video class="b-lazy" width="628" height="352" loop autoplay> <source data-src="http://henriksjokvist.net/examples/html5-video/video.ogg" type="video/ogg"> </video></li>
</ul>