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!
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();
}
});