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.
Add a loop attribute to the video element and it will loop for us automatically. The if doesnt work beacause it only checks once when the code is ran. You need the end event listener to check.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event