Tengo un video que estoy reproduciendo desplazándome con la rueda del mouse. Todo funciona bien, pero me gustaría comprobar si el vídeo ha terminado y volver al principio.
Intenté una declaración if que devolvió todas las variables a 0, pero no funciona. Este es mi código hasta ahora con la declaración if que no funciona:
const action = document.querySelector(".action"); const video = action.querySelector("video"); //Scroll Magic scenes const controller = new ScrollMagic.Controller(); let scene = new ScrollMagic.Scene({ duration: 200000, //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 / 3000; //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(5000, () => { console.log('User stopped scrolling.'); window.scrollTo(0, 0); }); window.addEventListener('scroll', tracker); //scroll back to beginning when movie has finished -- not working if (video.currentTime >= 100.0){ window.scrollTo(0, 0); scrollpos = 0; currentTime = 0; delay = 0; }¡Gracias por cualquier ayuda!
PD: ¿Hay alguna forma de volver al principio del video que no sea usando "window.scrollTo"?
video.tiempoActual = 0; no está trabajando aquí.
Agregue un atributo de loop al elemento de video y se repetirá automáticamente. El if no funciona porque solo verifica una vez cuando se ejecuta el código. Necesita el detector de eventos end para verificar.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event