javascript - 在视口(viewport)中暂停和播放视频

Question

当视频在视口(viewport)内时，我正在尝试播放和暂停...当我四处搜索时，我发现了以下代码。不幸的是，它没有用:

jQuery

    $(window).scroll(function(){
        if ($(window).scroll(100)){
            $('#video').play;
        }
    });

HTML

    <video preload="auto" loop="loop" id="background">
        <source src="background/background1.mp4" type="video/mp4"> </source>
        <source src="background/background1.webm" type="video/webm"> </source>
    </video>

我还尝试了以下页面上的代码:http://serversideguy.com/2014/02/05/play-youtube-videos-on-scroll-over/

但我也无法让它工作，有没有人可以指出我正确的方向？

在进入/离开视口(viewport)时播放和暂停视频是否可行，用户不会被突然出现的声音吓到吗？

Answer 1

我同意您在问题中所说的:用户可能不喜欢它，尤其是当他们使用移动设备并且您正在吸走他们所有的数据计划时。无论如何，这里是检查元素是否在视口(viewport)中的方法:http://jsfiddle.net/pwhjk232/

$(document).ready(function() {
    var inner = $(".inner");
    var elementPosTop = inner.position().top;
    var viewportHeight = $(window).height();
    $(window).on('scroll', function() {
        var scrollPos = $(window).scrollTop();
        var elementFromTop = elementPosTop - scrollPos;

        if (elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight) {
            inner.addClass("active");
        } else {
            inner.removeClass("active");
        }
    });
})

按照 Vohuman 的建议，您可以使用 .get(0).play() 和 .get(0).pause() 而不是使用 addClass