Question

我正在使用jQuery插件isInViewport jQuery isInViewport来控制两个视频在滚动进出视图时在单个页面上的播放和暂停。

我能够使其正常工作的唯一方法是使用两个if语句显式检查每个视频ID。

以下作品：

$(window).scroll(function() {
  if ( $("video#one").is( ':in-viewport')) {
     $("video#one")[0].play();
  } else {
     $("video#one")[0].pause();
  }

  if ( $("video#two").is( ':in-viewport')) {
     $("video#two")[0].play();
  } else {
     $("video#two")[0].pause();
  }
});

但是，效率低下。我可能会添加更多视频。每次更改视频时都不必调整JS。

这就是我要的..但是，一旦视频1滚动到视图中，它就会触发第二个视频（屏幕外）也开始播放。

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

无论页面有多少，如何调整每个功能来播放和暂停我的视频？

Answer 1

问题很可能是您的每个功能一次又一次地引用了所有视频。您应该可以使用 THIS 来解决此问题。

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

jQuery视口中未检测到多个视频

1 个答案: