jQuery in-viewport 未检测到多个视频

Posted 2023-05-07

【中文标题】jQuery in-viewport 未检测到多个视频

【英文标题】：jQuery in-viewport not detecting multiple videos

【发布时间】：2019-07-26 07:01:51

【问题描述】：

我正在使用 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();
     
  );
);

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

【参考方案1】：

问题很可能出在您的 each 函数中，您一遍又一遍地引用所有视频。您应该可以改用 THIS 来解决此问题。

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

【讨论】：

即使$("video").is( ':in-viewport')是true，第一个视频不应该只播放$("video")[0].play();吗？