Question

我创建了一个简单的JQUERY，以使视频（复数）不在View Port中时停止播放

您可以看到小提琴在这里工作：https://jsfiddle.net/x2tpLw5g/9/

您还可以在此处查看有效的演示：https://dallaswebideas.com/audio.html

我有两个问题。

1）我想将JQUERY放在下面，如下所示，我对此并不陌生，因此需要帮助：

<script>
$(window).scroll(function(){
if ($("#video1").not("#video1:in-viewport").length) {
$("#video1").not("#video1:in-viewport")[0].pause();
}
});
</script> 

<script>
$(window).scroll(function(){
if ($("#video2").not("#video2:in-viewport").length) {
$("#video2").not("#video2:in-viewport")[0].pause();
}
});
</script>

2）如果您在iPad或iPhone上检查了小提琴，则无法正常工作

更新：它只能在Firefox上运行，我已经在Chrome和IE11上进行了测试，也无法运行

有人知道如何解决此问题吗？

Answer 1

好，这是我最终使用的代码。

我想要获得的效果是

当我进入视口内的视频时，我将点击“播放自己（用户）”

但是如果我（用户）离开视口，视频将停止。

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.js"></script>

<script>
$(window).scroll(function() {
    $('video').each(function(){
        if ($(this).is(":in-viewport")) {
            $(this);
        } else {
            $(this)[0].pause();
        }
    })
});
</script>

工作小提琴在这里：https://jsfiddle.net/dh460c2x/5/

现场演示站点在这里：https://dallaswebideas.com/audio1.html

停止从ViewPort退出视频-修复帮助：在iPad和iPhone上放在一起JavaScript和Fix

1 个答案: