Question

我有这个代码在用户滚动时播放视频（视频在停止滚动时停止播放），但我想阻止页面滚动直到视频结束并且不确定如何实现此目的。

(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;
  });
})();

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

Answer 1

你可以添加一个类，如＆＃34;播放＆＃34;在视频播放时播放视频并使用CSS将其固定到位：

video.playing {
    position: fixed;
}

然后在不播放

时删除课程

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

1 个答案: