'Javascript Scrollmagic scroll Videoplayback. Get video duration an use it for scrollduration

Hello i tried various ways but it is not working for me.

I am scrolling a video with the scrollwheel and that is working fine. But if i change the videofile i have to find the scrollduration by trial and error.

I would like to make this happen automaticaly.

I would like to be able to change the scrollspeed to according to the scrollduration.

Thanks in advance!

const action = document.querySelector(".action");
const video = action.querySelector("video");
const videoheight = 3840; // 3840px UHD and if FullHd 1920px -> screen is in vertical position

//Check duration of video 
video.onloadedmetadata = function() {
  var videoduration = video.duration;
  console.log("videoduration is " + videoduration);
}

// How do i calculate the scrollmagic duration?
// I tried videohight*30fps*videoduration but it is not working

//Scroll Magic scenes
const controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
  duration: 500000, //64000
  triggerElement: action,
  triggerHook: 0
})

//  .addIndicators()
  .setPin(action)
  .addTo(controller);

//Scroll Magic video animation
let accelAmount = 0.1;
let scrollpos = 0;
let currentTime = video.currentTime;
let lastcurrentTime;
let delay = 0;

scene.on("update", e => {
  scrollpos = e.scrollPos / 20000; //the higher the number, the slower
  });

//Move
  setInterval(() => {
    delay += (scrollpos - delay) * accelAmount;
    video.currentTime = delay;
    console.log(video.currentTime + " reading");
    lastcurrentTime = video.currentTime;
  }, 33.3);

//function to check if is still scrolling
function scrollTracker(delay, callback) {
  let timeout = null;

  return function(...args) {
    if (timeout !== null) {
      clearTimeout(timeout);
      timeout = null;
    }

    timeout = setTimeout(callback, delay, ...args)
  };
}

//check if is still scrolling after x seconds
const tracker = scrollTracker(10000, () => {
  console.log('User stopped scrolling.');
  window.scrollTo(0, 0);
});

window.addEventListener('scroll', tracker);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source