HTML5 Video time tracking

html, jquery, video

Solution

you should be able to do like like

// set event listener to execute on timeupdate. This gets invoked every ~250ms or so
$('video#full-vid').on('timeupdate',function() {
  // use parseInt to round to whole seconds
  var ct = parseInt(this.currentTime);
  // only eval once per second inc, since timeupdate pops ~4 times per second
  if (this.lastTime!=ct) {
    // if current time is divisible by 10 then an inc of 10s has passed
    if (ct%10===0) {
      console.log(ct,'seconds have passed');    
    }
  }
  this.lastTime=ct;
});

edit: if you are looking to do it at specific time intervals, you can do this:

// set event listener to execute on timeupdate. This gets invoked every ~250ms or so
$('video#full-vid').on('timeupdate',function() {
  // use parseInt to round to whole seconds
  var ct = parseInt(this.currentTime);
  // only eval once per second inc, since timeupdate pops ~4 times per second
  if (this.lastTime!=ct) {
    // do something at specified time elapsed markers
    switch (ct) {
      case 10 : 
        // do something
        break;
      case 20 : 
        // do something
        break;
    }
  }
  this.lastTime=ct;
});

Problem

I have an HTML5 Video that plays on my site, I want to track the time of this video and have it execute a function or alert when the videos duration lasts 10 secs, 20 secs, 30 secs and so on.. I am a little stumped on how to do this? I can get it to alert every 10 seconds with jQuerys setInterval, but this is based on jquerys time paramter and not on the movie itself... this is what I have ``` window.setInterval(function(){ var video = $('video#full-vid').get(0); //get the native browser source alert('video time:' + video.currentTime); }, 10000); ``` Any ideas? Basically this is the logic: - Get Video Time - If 10 seconds of video pass alert "10 Seconds have passed" - If 20 seconds of video pass alert "20 Seconds have passed" so on and so on... Thanks

Original source