Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

190
Vistas
Javascript Scrollmagic scroll Videoplayback. Obtenga la duración del video y utilícelo para la duración del desplazamiento

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);
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda