CODEWITHSUNDEEP
javascripteventsvideotimeevent-handling
kdizzle
kdizzle

Reputation: 627

How to invoke a function once at 10 second intervals from the start of the entire video with timeupdate?

My goal is to fire an event once every time the user gets past a 10 second interval mark within their video e.g. 10, 20, 30, 40 seconds...

How can I achieve this with the timeupdate event? I feel like I'm close but can't seem to get the right answer. What I have so far is firing several times at ~10.250, ~10.5, and ~10.75 current time. I need it to only fire once per 10 second interval.

videoPlayer.on('timeupdate', (e) => {
  // Only invoke the function after the 10 second mark
  if (videoPlayer.currentTime() > 10 && videoPlayer.currentTime() % 10 < 1) {
    myFunc();
  }
});

I appreciate any help I can get! Thank you!

Upvotes: 0

Views: 171

Answers (1)

BrownieInMotion
BrownieInMotion

Reputation: 1182

Try keeping track of the current time in seconds and updating only when it changes. For example:

// keep track of time in seconds
let time = 0;
videoPlayer.addEventListener('timeupdate', (e) => {
  const exactTime = videoPlayer.currentTime;
  const current = Math.floor(exactTime);

  // still in the same second! do nothing
  if (current === time) return;
  
  time = current;

  // if it is a new ten second interval
  if (time % 10 === 0) {
    // console.log(exactTime);
    myFunc();
  }
});

Upvotes: 2

Related Questions