Question

在用户向下滚动页面时，使用视频下方的代码进行播放。这造成了一个问题，因为我使用的是100vh的内容块。当窗口变高时，视频将不再以与在其上播放的每个html内容块对齐的速度和持续时间播放。

如何根据屏幕高度更改变量playingConst？

enterView({
  selector: '.home-slide',
  enter: function(el) {
    el.classList.add('entered');
  },
  exit: function(el) {
    el.classList.remove('entered');
  },
})

var frameNumber = 0, // start video at frame 0
  // lower numbers = faster playback
  playbackConst = 900,
  // select video element
  vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option


// Use requestAnimationFrame for smooth playback
function scrollPlay() {
  var scrollTop = document.querySelector(".home-slider-container").scrollTop;
  var frameNumber = scrollTop / playbackConst;
  vid.currentTime = frameNumber;
  window.requestAnimationFrame(scrollPlay);
}

window.requestAnimationFrame(scrollPlay);

Answer 1

如果使用playbackConst作为scrollTop / screenHeight的比率，则可以手动调整屏幕大小，并且在不同大小下也应相同。

比率1表示滚动100vh时将播放1秒的视频，比率1.5意味着滚动100vh等时将播放1.5秒的视频。

演示：

var frameNumber = 0,
  playbackConst = 1,
  vid = document.getElementById('v0'),
  homeSliderContainer = document.querySelector(".home-slider-container");

function scrollPlay() {
  var scrollTop    = homeSliderContainer.scrollTop,
      screenHeight = window.innerHeight,
      frameNumber  = (scrollTop / screenHeight) * playbackConst;
      
  vid.currentTime = frameNumber;
  window.requestAnimationFrame(scrollPlay);
}

window.requestAnimationFrame(scrollPlay);

* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: #222; }

#v0, .home-slider-container {
  position: fixed;
  width: 100%;
  height: 100%;
}

.home-slider-container {
  overflow: auto;
  background: rgba(0,0,0,.4);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  padding: .5em 2em;
}

<video id="v0">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<div class="home-slider-container">
   <h1>Hello, world</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales sit amet mauris nec vulputate. Aliquam erat volutpat.</p><p>Suspendisse orci sem, iaculis sed ullamcorper non, vehicula vitae nisl. Phasellus vestibulum scelerisque lacinia. Ut a nisl dictum, cursus sem eget, dignissim eros. Maecenas eget dolor eget augue luctus cursus. </p><p>Sed faucibus pulvinar tincidunt. Donec a dolor elementum, lobortis est vel, blandit velit. </p><h1>Hello world, again</h1><p>Quisque facilisis tortor iaculis arcu dignissim, quis consectetur neque blandit. Pellentesque malesuada odio imperdiet velit ullamcorper, sit amet porta justo maximus. Aenean accumsan, tortor eget.</p><p>Scelerisque varius, nunc tellus malesuada lacus, ut interdum metus ante eu orci. Nullam porttitor vel neque vitae faucibus. Integer interdum pellentesque ligula sed aliquet.</p><h1>Hello, world once more</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales sit amet mauris nec vulputate. Aliquam erat volutpat.</p><p>Suspendisse orci sem, iaculis sed ullamcorper non, vehicula vitae nisl. Phasellus vestibulum scelerisque lacinia. Ut a nisl dictum, cursus sem eget, dignissim eros. Maecenas eget dolor eget augue luctus cursus. </p><p>Sed faucibus pulvinar tincidunt. Donec a dolor elementum, lobortis est vel, blandit velit. </p><h1>Hello world, one last time</h1><p>Quisque facilisis tortor iaculis arcu dignissim, quis consectetur neque blandit. Pellentesque malesuada odio imperdiet velit ullamcorper, sit amet porta justo maximus. Aenean accumsan, tortor eget.</p><p>Scelerisque varius, nunc tellus malesuada lacus, ut interdum metus ante eu orci. Nullam porttitor vel neque vitae faucibus. Integer interdum pellentesque ligula sed aliquet.</p>
</div>

如何根据屏幕高度设置变量

1 个答案: