Автозапуск видео на прокрутке - больше одного видео в окне просмотра

Question

У меня есть страница, содержащая не более 15 видеороликов полной ширины, расположенных друг над другом и разделенных полем на 15 пикселей.Я хотел бы рассчитать общий процент прокручиваемой страницы Y, а затем условно воспроизвести каждое видео на основе той области прокручиваемой области, которую они занимают.Например, если процент прокрутки Y составляет от 0 до 1, а видео занимает область .45 - .5, а пользователь прокручивал от 45% до 50% страницы;Воспроизвести видео.

Изначально я думал о том, чтобы рассчитать средние 33% страницы и использовать эту область для условного воспроизведения видео.Однако, если окно было выше, чем оно было широким, а пользователь прокручивал его до конца, последнее видео никогда не воспроизводилось.Ниже приведен некоторый Javascript, который я написал для этого:

$(document).ready(function() {
    // Grab the video container because video element overflows vertically
    var video_containers = document.querySelectorAll('.banner');

  if(! video_containers.length > 0)
        return;

  function calcHeightBounds() {
    var viewport_height = window.innerHeight;
    var heightLb = (Math.floor(( viewport_height * 1/3 ))) - 1;
    var heightUb = heightLb * 2;
  }

    window.addEventListener("resize", calcHeightBounds());
    window.addEventListener("scroll", function(){
        video_containers.forEach(function(vc){
            var viewportOffset = vc.getBoundingClientRect();

            if((Math.floor(viewportOffset.top + (viewportOffset.height*.51)) > heightLb) && (Math.floor(viewportOffset.top + (viewportOffset.height*.51)) < heightUb)) {
                vc.firstElementChild.play();
      } else {
                vc.firstElementChild.pause();
      }
        });
    });
});

Когда этот подход не сработал, я решил попробовать использовать текущую позицию прокрутки пользователей для воспроизведения каждого из видео, основываясь на проценте прокручиваемогоУ них были занятия.Ниже приведен пример кода, который я написал для этого.

$(document).ready(function() {
  video_containers = document.querySelectorAll('.banner');
  var scrollTop = 0;
  var viewable_height = document.documentElement.scrollHeight + window.innerHeight;
  ranges = [];

  if(! video_containers.length > 0)
    return;

  function makeRanges(i, lb, upb){
    return {
      i: i,
      lb: lb,
      upb: upb
    };
  }

  function createBoundingPercentages(element, i, a){
     if(! array.length > 0)
       console.log("array length not greater than 0");
    lb = a[i].offsetTop / viewable_height;
    upb = (a[i].offsetTop + a[i].scrollHeight) / viewable_height;
    ranges.push(makeRanges(i, lb, upb));
  }

  video_containers.forEach(createBoundingPercentages);

  window.addEventListener("scroll", function(){
    scroll_top = document.documentElement.scrollTop;
    p = scroll_top / viewable_height;
    if(ranges === null){
      console.log("ranges is null");
      return;
    }

      if(p > r.lb && p < r.upb){
        video_containers[r.i].firstElementChild.play();
      }else{
        video_containers[r.i].firstElementChild.pause();
      }
    });
  });
});

Если мой мыслительный процесс неверен, пожалуйста, исправьте меня и дайте мне знать, какое может быть лучшее решение.Мне также нужно убедиться, что независимо от того, какое решение работает, кросс-браузер IE 11, Edge, Firefox, Safari и Chrome.