Full Circle Design Studio Logo/link to home page Button to open mobile navigation menu

Play Video On Scroll

Zane Huggins | 06/2021

  <div class="d-none" id="set-height"></div>
  <p id="time"></p>
  <video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload"><source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="https://vimeo.com/562614285"></source>
  <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="<?php echo get_template_directory_uri(); ?>/assets/videos/fgm.ogv"></source>
  <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="<?php echo get_template_directory_uri(); ?>/assets/videos/fgm.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
  </video>


  <script>
  var frameNumber = 0, // start video at frame 0
    // lower numbers = faster playback
    playbackConst = 500,
    // get page height from video duration
    setHeight = document.getElementById("set-height"),
    // select video element
    vid = document.getElementById('v0');
    // var vid = $('#v0')[0]; // jquery option

// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
  setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});


// Use requestAnimationFrame for smooth playback
function scrollPlay(){
  var frameNumber  = window.pageYOffset/playbackConst;
  vid.currentTime  = frameNumber;
  window.requestAnimationFrame(scrollPlay);
}

window.requestAnimationFrame(scrollPlay);
</script>