0

Using the code below a video plays as the user scrolls down the page. this creates an issue because i am using content blocks that are 100vh. When the window gets taller, the video is no longer playing at the speed and duration to line up with each html content block that plays over it.

How do I change the the variable playbackConst based on screen height?

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);
Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
Courtland Fusion
  • 63
  • 1
  • 6
  • Does this answer your question? [Get the size of the screen, current web page and browser window](https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window) – AGoranov Jun 22 '20 at 21:56
  • This does help attain the screen height, but not how to implement it into this scenario. I need to create an if else statement based on the number attained by this that changes what var playbackConst value is based on the height. – Courtland Fusion Jun 22 '20 at 22:00

1 Answers1

3

If you use your playbackConst as a ratio of the scrollTop / screenHeight, you can adjust it manually at a random screen size, and it should work the same at different sizes.

A ratio of 1 means that 1 second of video will play when scrolling by 100vh, a ratio of 1.5 means that 1.5 seconds will play when scrolling by 100vh, etc.

Demo:

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>
blex
  • 24,941
  • 5
  • 39
  • 72