html5 视频离开视口时如何暂停？答案

【问题标题】：How do I PAUSE a html5 video when it leaves the viewport?html5 视频离开视口时如何暂停？
【发布时间】：2017-02-06 16:34:11
【问题描述】：

目前，平滑滚动的单页网站有一个“介绍”部分 (#intro) 作为包含“视频”的第一个部分，这让我自己陷入了困境。

该视频是一个 html5 视频，循环播放和自动播放，位于一个名为“intro-heading”的 div 容器内（最初它包含一个 h1 标题，但已被省略并替换为视频内容 heh）

我应该指出，名为 intro-heading 的 div 容器包含 ID 为 #intro-video 的视频，应用了“growIn”类，是的，我使用的是 Daniel Eden 的“获奖” Animate.css 库大声笑

所以，到目前为止，这是我的代码：

    <script>
    $(document).ready(function(){
    $(window).scroll(function(){
    var x = $(document).scrollTop();
    console.log(x); /* just for observing how far from the top i am..*/

    if ($(document).scrollTop() > 750) {

        $('#intro-video').pause();

        }
    });
    });
    </script>

这不起作用。如果我更换 $('#intro-video).pause();符合：

$('#intro-video').css("display","none");

然后视频果然消失了，但我仍然可以听到音乐:))

那么显然，这不是我想要的。我想要的只是视频暂停（我假设，我们听不到任何我需要的音频）如果视频离开视口，当我们向上滚动并重新播放视频时恢复（再次播放）进入视口。

上面的代码不起作用，但是当我使用诸如 css 显示行之类的其他东西时，它就起作用了。还有一些我想问的问题，如果我通过问你这个问题来解决这个问题，请原谅我一百万英里 - 但是是否有一个名为 isInViewport.js 的库，它可以让这很容易实现？在视口外暂停视频 - 回到视口内播放视频！

这个插件可以让我实现我的目标吗？

在此阶段的任何帮助将不胜感激。谢谢。 :-)

【问题讨论】：

pause 或 play 需要在 dom 元素上调用，而不是 jquery 对象 -- 可能与 Play/pause HTML 5 video using JQuery 重复
我怀疑这一点。谢谢白帽。

标签： jquery css html video viewport

【解决方案1】：

好的，WhiteHat，谢谢你为我指明了正确的方向。看来我已经成功地实现了我所追求的目标。因此：

<script>
$(document).ready(function(){
$(window).scroll(function(){
    var x = $(document).scrollTop();
    console.log(x);

    if ($(document).scrollTop() > 750) {

        $('#intro-video').get(0).pause();

        }

        else if ($(document).scrollTop() < 650 ) {

            $('#intro-video').get(0).play();

        }
    });
});
</script>

这可以很好地完成工作，谢谢:)

【讨论】：