Выбор всех элементов

[1111]

Здравствуйте.
Есть такой код

<section class="features">
    <h2 class="features__title">Особенности</h2>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="1.mp4" type="video/mp4">
    </video>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="2.mp4" type="video/mp4">
    </video>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="3.mp4" type="video/mp4">
    </video>
    <video class="features__video" loop="loop" muted="" playsinline="">
        <source src="4.mp4" type="video/mp4">
    </video>
</section>

И скрип который автозапускает видео когда оно в окне просмотра

<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>
<script>
// Play Video
$(function() {
  var $video = $('video');
  var $window = $(window);

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

Проблема в том что, запускается лишь первое видео, я как понимаю это связано с ноликом в $video[0], т.е. выбирается тег video который первый на странице(нулевой). Я совершенно не знаю JS, и не понимаю как изменить чтобы работало со всеми элементами на странице.
Помогите пожалуйста.
Спасибо

[рони]

1111,
https://javascript.ru/forum/misc/691...tml#post454509

[1111]

1111,
https://javascript.ru/forum/misc/691...tml#post454509

Здравствуйте Рони.
Немного не понял на что вы мне дали ссылку, там скрипт анимации.
Почитал в интернете, и как понял, нужно создать цикл, который бы посчитал все элементы video на странице и добавлял бы порядковый номер в переменную $video[0].
пробую так

<script>
// Play Video
$(function() {
  var $video = $('video');
  var $window = $(window);
  var i;
  var acc = document.getElementsByClassName("features__video");

  for (i = 0; i < acc.length; i++) {
  $window.scroll(function() {
    if ($video.is(":in-viewport")) {
      $video[i].play();
    } else {
      $video[i].pause();
    }
  })};

});
</script>

Но мне выдает что синтаксическая ошибка, не пойму пока где в чем ошибка

[1111]

Получилось!

// Play Video
$(function() {
  var $video = $('video');
  var $window = $(window);
  var i;
  var acc = document.getElementsByClassName("features__video");


  $window.scroll(function() {
    for (i = 0; i < acc.length; i++) {
        if ($video.is(":in-viewport")) {
            $video[i].play();
          } else {
            $video[i].pause();
          }
        }
    }
 );
});

[рони]

Немного не понял на что вы мне дали ссылку

на скрипт который вам нужен, дополнительных библиотек не требуется, ставить в любое место.

window.addEventListener("DOMContentLoaded", anim, false)
window.addEventListener("scroll", anim, false);

function anim() {
   [].forEach.call( document.querySelectorAll('video'), function(el) {
      checkViewport(el) ? el.play() : el.pause()
   });
}
function checkViewport(a) {
    var b = a.getBoundingClientRect();
    return 0 < b.top && b.top + a.scrollHeight < window.innerHeight
};

[1111]

рони,
Спасибо большое! И правда работает, причем Ваш скрипт намного быстрее работает чем тот Франкиштейн которого сотворил я)