Hola he probado de varias formas pero no me funciona.
Estoy desplazando un video con la rueda de desplazamiento y funciona bien. Pero si cambio el archivo de video, tengo que encontrar la duración del desplazamiento por prueba y error.
Me gustaría que esto suceda automáticamente.
Me gustaría poder cambiar la velocidad de desplazamiento de acuerdo con la duración del desplazamiento.
¡Gracias por adelantado!
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);