Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

102
Views
Javascript start video again after time

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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

https://www.w3schools.com/tags/att_video_loop.asp

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!