Javascript start video again after time

Viewed 40

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.

1 Answers
Related