Запуск воспроизведения видео, когда совпадают два деления

Question

Я создал способ прокрутки divs, у одного есть меню, а у других - div с пробелами, а у другого - видео.

В верхней части страницы находится меню навигации, которое содержит«следующий», «предыдущий», «перезагрузить» и «начать». Эти команды деформированы в функции,

$("#next-item").on("click", function(){,

Страница выглядит следующим образом:

<div class="webcam-left">
  <div class="bottom-panel">
    <div class="center" id="content">
      <div class="bottom-panel-post internal start"></div>
      <div class="bottom-panel-post internal video-post"><video src="https://ia800606.us.archive.org/12/items/ACTV_News_open/ACTV_News_open.mp4"></video></div>
      <div class="bottom-panel-post internal"></div>
    </div>
  </div>
</div>
<div class="nav-right nav-main">
  <div class="rundown-panel">rundown</div>
    <div class="rundown-items">
       <div class="irl-today first"><div class="current">Welcome</div></div>
       <div class="irl-today override">Category name</div>
       <div class="irl-today">the end</div>
    </div>
  </div>
</div>

То, что я пытаюсь сделать, это при прокрутке внизсписок, как вы запускаете воспроизведение на видео, когда видео показывается?

При прокрутке вниз я добавил классы в div, которые содержат видео.

На левой стороне есть .overrideи видео сторона имеет .video-post.

Я пытался сделать if hasClass(), но он воспроизводится при первом нажатии:

if ( $('.rundown-items').is('.override') ) {
if ($( '.bottom-panel-post' ).has('video')) {
  $('video').trigger('play');
};
}; 

Рабочий код - https://jsfiddle.net/openbayou/paonbxcL/8/

Answer 1

Я понял, проблема была в том, что он искал класс для всех элементов, а не для каждого отдельно, поэтому я добавил функцию .each, чтобы искать класс для каждого отдельного элемента.

$(".slider-slide-wrap").each(function (i) {
  var posLeft = $(this).position().left
  var w = $(this).width();

  // add shown class on a div
  if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
    $(this).addClass('shown').siblings().removeClass('shown');
  }

  // if .shown has .play-video, trigger play
  if ($('.shown').is(".play-video")) {
    $('video').trigger('play');
  };
});