HTML5 video time tracking

Question

I have an HTML5 video that plays on my site, I want to track the time of this video and perform its function or warning when the video lasts 10 seconds, 20 seconds, 30 seconds, etc. Am I fixated on how to do this? I can get it to warn every 10 seconds using jQuerys setInterval, but this is based on the jquerys time parameter and not 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?

This is basically the logic:

• Get a video
• If 10 seconds of video transmission warning “10 seconds have passed”
• If there are 20 seconds of a “20 seconds have passed” video transmission warning, etc., etc.

thanks

Answer 1

, ,

// 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;
});

, :

// 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;
});