HTML5视频时间跟踪

时间:2013-11-25 19:36:06

标签: jquery html5 video

我有一个HTML5视频在我的网站上播放,我想跟踪这段视频的时间,让它在视频持续时间持续10秒,20秒,30秒等时执行功能或提醒..我我有点难过如何做到这一点?我可以用jQuerys setInterval每10秒发出一次警报,但这是基于jquerys时间参数而不是电影本身...这就是我所拥有的

window.setInterval(function(){
  var video =  $('video#full-vid').get(0); //get the native browser source
  alert('video time:' + video.currentTime);
}, 10000);

有什么想法吗?

基本上这是逻辑:

  • 获取视频时间
  • 如果10秒的视频通过警告“已经过了10秒”
  • 如果20秒的视频通过警告“已经过了20秒” 等等...

由于

1 个答案:

答案 0 :(得分:11)

你应该能够像

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