在 Scroll 上播放视频，但停止页面移动答案

【问题标题】：Play video on Scroll, but stop page from moving在 Scroll 上播放视频，但停止页面移动
【发布时间】：2015-02-27 11:46:40
【问题描述】：

我有这段代码可以在用户滚动时播放视频（当他们停止滚动时视频停止播放），但我想停止页面滚动，直到视频结束并且不知道如何实现这一点。

(function() {

  var window_height   = $(window).height();
  var document_height = $(document).height();

  var video  = $('.landing #video-bg').get(0);
  var length = 19; //seconds

  var start = window_height;
  var end   = document_height - start;

  $(document).on('scroll', function () {   
    var position = $(document).scrollTop();
    var percent  = (position/end);

    var currentTime = length*percent;

    video.currentTime = currentTime;
  });
})();

我想要的是阻止页面滚动，即使用户滚动。所以基本上，用户滚动，滚动播放和暂停视频，然后一旦视频到达结尾，就会恢复正常的页面滚动。

【问题讨论】：

标签： jquery scroll html5-video

【解决方案1】：

您可以在视频播放时为视频添加“播放”等类，并使用 CSS 将其固定到位：

video.playing {
    position: fixed;
}

然后在不播放时删除该类

【讨论】：

也许我还不够清楚。如果我只是修复视频，页面的其余部分仍会滚动。我想要的是阻止页面滚动，即使用户滚动。所以基本上，用户滚动，滚动播放和暂停视频，然后一旦视频到达结尾，就会恢复正常的页面滚动。