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

我正在创建一个网页来同时播放多个html5视频。我添加了lazy load脚本+visible only脚本，因此当我滚动时，只有视口中的视频才会加载和播放。看演示

一切正常。每次我刷新页面时，它都会随机显示视频。当我向下滚动时，它会加载视频并播放，当我继续向下滚动时，向上滚动的视频会暂停。当我向上滚动到刚才观看的视频时，它们将恢复。这是意料之中的

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

我不知道如何使视口下的视频停止播放。在演示中，它可能工作得很好，但当我复制相同的代码并将其放在电脑上的HTML文件中，因此它在屏幕上只显示一行3个视频时，问题就出现了：当我向上滚动时，视口下的视频会一直播放

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

var bLazy=新bLazy({
//选择权
});
//洗牌列表中的元素
var ul=document.querySelector（“ul”），//获取列表
temp=ul.cloneNode（true），//克隆列表
i=临时儿童长度+1；
//洗牌克隆列表（性能更好）
而（i-->0）
临时附加子对象（临时子对象[Math.random（）*i|0]）；
ul.parentNode.replaceChild（临时，ul）；//将副本拖回“ul”
$（窗口）。滚动（函数（）{
$（'video'）。每个（函数（）{
if（$（this）.visible（））{
$（此[0].play（）；
}否则{
$（此）[0]。暂停（）；
}
})
});
ul{
填充：0；
保证金：0；
}
*>：第一个孩子，
*>：第n个孩子（2），
*>：第n个孩子（3）{
填充：0；
}
ulli{
显示：内联块；
填充：70px0；
}