Question

我有一个页面，其中最多包含15个全角视频，彼此堆叠，并以15px的边距隔开。我想计算可滚动页面Y的总百分比，然后根据它们占据的可滚动区域部分有条件地播放每个视频。例如，如果Y的可滚动百分比是从0到1，并且视频占据了0.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();
      }
        });
    });
});

当这种方法行不通时，我决定尝试使用用户当前的滚动位置，根据他们所占据的可滚动Y的百分比来播放每个视频。下面是我为此编写的代码示例。

$(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浏览器。

自动滚动播放视频-视口中大于一个视频

0 个答案: