i have e video that i am playing by scrolling with my mousewheel. Everything is working fine but i would like to check if the video has finished and jump back to the beginning.
I have tried a if statement setting all variable back to 0 but it is not working. This is my code so far with the non working if statement:
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;
}
Thanks for any help!
P.S. Is there a way to jump back to beginning of the video other then by using "window.scrollTo"?
video.currentTime = 0; is not working here.