Javascript 滚动html5视频

我正在尝试运行一个夹在两个div之间的滚动视频。这是我从中获得灵感的实际代码笔

HTML

但当它夹在两个div之间时，问题就出现了

我要寻找的效果是，当滚动位置为“视频”时，视频应该开始

即$'vo'。position.top

---

并在滚动位置结束开始位置+视频元素高度

移动视频时，需要使用视频高度和距页面顶部的偏移量来计算。请注意，在onscroll处理程序中，它得到一个介于

// select video element
var vid = document.getElementById('v0');
var time = $('#time');
var scroll = $('#scroll');
var windowheight = $(window).height() - 20;

var scrollpos = window.pageYOffset / 400;
var targetscrollpos = scrollpos;
var accel = 0;

// ---- Values you can tweak: ----
var accelamount = 0.01; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
var bounceamount = 0.91; //value from 0 to 1 for how much backlash back and forth you want in the easing. 0 = no bounce whatsoever, 1 = lots and lots of bounce

// pause video on load
vid.pause();

window.onscroll = function() {
  //Set the video position that we want to end up at:
  targetscrollpos = ($(document).scrollTop() - $(vid).offset().top) / $(vid).height();
  targetscrollpos = targetscrollpos > 0 ? targetscrollpos < $(vid).height() ? targetscrollpos : $(vid).height() : 0;

  targetscrollpos *= 13500/ $(vid).height();
  //move the red dot to a position across the side of the screen
  //that indicates how far we've scrolled.
  scroll.css('top', 10 + (targetscrollpos * windowheight));
};

setInterval(function() {

  //Accelerate towards the target:
  accel += (targetscrollpos - scrollpos) * accelamount;

  //clamp the acceleration so that it doesnt go too fast
  if (accel > 1) accel = 1;
  if (accel < -1) accel = -1;

  //move the video scroll position according to the acceleration and how much bouncing you selected:
  scrollpos = (scrollpos + accel) * (bounceamount) + (targetscrollpos * (1 - bounceamount));

  //move the blue dot to a position across the side of the screen
  //that indicates where the current video scroll pos is.  
  time.css('top', 10 + (scrollpos / targetscrollpos * 400 * windowheight));

  //update video playback
  vid.currentTime = scrollpos;
  vid.pause();

}, 40);

---

是的，不幸的是，使用这种方法，你失去了全屏解决方案的精度，因为它被滚动13500像素，而在这种解决方案中，你只滚动视频的高度。是的，这也与浏览器有关。一些浏览器会滚动多个像素，每个滚动只触发一个滚动事件，其他浏览器将为滚动的每个像素触发滚动事件。为了使解决方案按您希望的方式工作，您必须检测与上一个滚动的差异，然后将视频设置为在这些位置之间播放

<div id="set-height2"></div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src="js/index.js"></script>

  </body>
</html>

<div id="some1"></div>
<video id="v0"></video>
<div id="some2"></div>

// select video element
var vid = document.getElementById('v0');
var time = $('#time');
var scroll = $('#scroll');
var windowheight = $(window).height() - 20;

var scrollpos = window.pageYOffset / 400;
var targetscrollpos = scrollpos;
var accel = 0;

// ---- Values you can tweak: ----
var accelamount = 0.01; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
var bounceamount = 0.91; //value from 0 to 1 for how much backlash back and forth you want in the easing. 0 = no bounce whatsoever, 1 = lots and lots of bounce

// pause video on load
vid.pause();

window.onscroll = function() {
  //Set the video position that we want to end up at:
  targetscrollpos = ($(document).scrollTop() - $(vid).offset().top) / $(vid).height();
  targetscrollpos = targetscrollpos > 0 ? targetscrollpos < $(vid).height() ? targetscrollpos : $(vid).height() : 0;

  targetscrollpos *= 13500/ $(vid).height();
  //move the red dot to a position across the side of the screen
  //that indicates how far we've scrolled.
  scroll.css('top', 10 + (targetscrollpos * windowheight));
};

setInterval(function() {

  //Accelerate towards the target:
  accel += (targetscrollpos - scrollpos) * accelamount;

  //clamp the acceleration so that it doesnt go too fast
  if (accel > 1) accel = 1;
  if (accel < -1) accel = -1;

  //move the video scroll position according to the acceleration and how much bouncing you selected:
  scrollpos = (scrollpos + accel) * (bounceamount) + (targetscrollpos * (1 - bounceamount));

  //move the blue dot to a position across the side of the screen
  //that indicates where the current video scroll pos is.  
  time.css('top', 10 + (scrollpos / targetscrollpos * 400 * windowheight));

  //update video playback
  vid.currentTime = scrollpos;
  vid.pause();

}, 40);