Search code examples
javascripttypescriptdom-eventshtml5-video

Javascript seeking, seek and timeupdate Events || Mux


So I'm currently trying to understand how the timeupdate, seeking and seek events work. I'm using MUX Player and yes, I they do get triggered, but I can't quite wrap my brain around the way it works. Let's say the video given in the sandbox, it is roughly 4:09 long and when I reach the end the timeupdate tells me it's been 168604. Now assuming that the timestamp is being returned in ms, I do the math, but then it just becomes 2.81006667 minutes; Which obviously doesn't match up with the duration.

MUX Player Documentation

CodeSandbox

The endgoal is to check whether the user has a seek of more than 5 seconds and then return true, but before I get there, I need to understand how these events really work.


Solution

  • Assuming you're looking at the event.timeStamp value, that number doesn't have much to do with the video -- it's a value that comes from the event itself (see https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp) and you can ignore it for this use case.

    The timeupdate event lets you know that the video has progressed, but the event itself doesn't contain the information you need to determine where in the video the current viewer is. For that, you should get the current time off of the player itself within the event callback with player.currentTime

    So, to check if the seek is longer than 5 seconds, you'd need to know where the viewer was prior to the seek. You could track the viewer's position in the video using timeupdate, and then listen for a seeked event where you'd also grab the player.currentTime. If the difference between the seeked event's currentTime and the last known currentTime from the timeupdate event is greater than 5 seconds, then boom, you have what you need to proceed.

    Check out this post for some sample code on how others have tackled this in the past: HTML5 Video: get seek-from position

    I work at Mux, happy to answer any other questions specific to Mux player :)