Question

当视频在视口中时，我正在尝试播放和暂停... 当我在四处寻找时，我发现了以下代码......但遗憾的是，这些代码无效：

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

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

在进出视口时播放和暂停视频是否实用，用户是否会突然出现声音而震惊？

Answer 1

我同意您在问题中所说的内容：用户可能不喜欢它，特别是如果他们使用移动设备并且您正在吮吸他们的所有数据计划。无论如何，这里是如何检查元素是否在视口中：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");
        }
    });
})

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

Answer 2

您的代码中存在多个错误：

$(window).scroll(100)不是比较。您正在将整数传递给scroll方法，该方法用于附加scroll侦听器。您应该使用scrollTop()方法并使用===或==进行比较。
play是一种方法，您应该使用()调用运算符来调用该方法。但是jQuery对象没有play方法，HTMLVideoElement对象有play方法，所以你应该首先从jQuery集合中获取DOM元素对象。

代码中没有ID为video的元素，选择器应为#background。

$(window).scroll(function(){
    if ($(window).scrollTop() === 100) {
        $('#background').get(0).play();
    } else {
        $('#background').get(0).pause();
    }
});

请注意scroll事件多次被触发，您应该考虑throttling处理程序。

Answer 3

$(window).scroll(function(e)
  {
    var offsetRange = $(window).height() / 3,
        offsetTop = $(window).scrollTop() + offsetRange + $("#header").outerHeight(true),
        offsetBottom = offsetTop + offsetRange;

    $(".video").each(function () { 
      var y1 = $(this).offset().top;
      var y2 = offsetTop;
      if (y1 + $(this).outerHeight(true) < y2 || y1 > offsetBottom) {
        this.pause(); 
      } else {
        this.play();
      }
    });
});

在视口中暂停和播放视频

3 个答案: