jQuery内部未检测到多个视频

Question

我正在使用jQuery插件isInViewport jQuery isInviewPort来控制单页上两个视频的播放和暂停，一旦它们滚动到＆amp中；看不见。

我能够让它上班的唯一方法是用两个IF statements明确检查每个视频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();
     }
  });
});

如何调整每个函数以播放＆amp;在1页上暂停我的视频，无论有多少？

Answer 1

问题最有可能在您的中，您一次又一次地引用所有视频。您应该能够使用而不是此来解决此问题。

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