HTML5 Video time tracking

前端 未结 1 852
暗喜
暗喜 2021-01-06 02:23

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,

相关标签:
1条回答
  • 2021-01-06 03:24

    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;
    });
    
    0 讨论(0)
提交回复
热议问题