停止ViewPort中的视频-修复帮助:将JavaScripts和FIX放在iPad & iPhone上

Question

我创建了一个简单的JQUERY，使视频(复数)停止时，不在视图端口

你可以看到Fiddle在这里工作：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上检查Fiddle，它不起作用

更新:它只在火狐上工作，我在Chrome和IE11上测试过，也不工作

，有人知道如何解决这个问题吗？

Answer 1

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

我想要达到的效果是

当我到达视口内的视频时，我将单击play user(用户)。

但是如果我把(用户)移出视野之外，视频就会停止。

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

Fiddle在这里：https://jsfiddle.net/dh460c2x/5/

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