时间戳

首页 > 解决方案 > jQuery in-viewport 未检测到多个视频

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

问题描述

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

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

标签： javascriptjqueryvideo

解决方案

问题很可能出在您一遍又一遍地引用所有视频的每个功能中。您应该能够通过使用THIS来解决此问题。

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

推荐阅读