JQuery в области просмотра не обнаруживает несколько видео

Question

Я использую плагин jQuery isInViewport jQuery isInViewport для управления воспроизведением и приостановкой двух видео на одной странице, когда они прокручиваются и исчезают из вида.

Единственный способ заставить его работать - это явная проверка каждого идентификатора видео с помощью двух операторов if.

Следующие работы:

$(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 странице независимо от их количества?

Answer 1

Скорее всего, проблема в вашей каждой функции, которую вы снова и снова обращаетесь ко ВСЕМ видео.Вы должны быть в состоянии решить эту проблему, используя ЭТО .

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