[html5]html5视频播放器取视频时间的方法

video 的 currentTime 属性用来获取当前播放的位置。duration 属性表示当前资源的长度。利用这两个属性，可以实现 当前时刻/总长度 格式的时间显示。

<font id="now_time" size="3"></font>/<font id="duration" size="3"></font> 
 
var nowTime = document.getElementById('now_time'); 
var duration = document.getElementById('duration'); 
 
//初始值设为0 
nowTime.textContent = 0; 
duration.textContent = 0; 
 
//currentTime 和 duration 单位都是秒，我们写一个函数来将时间显示格式变为 mm:ss。 
function parseTime(time){ 
  time = Math.floor(time); 
  var _m, _s; 
  _m = Math.floor(time/60); 
  _s = time - _m*60; 
  if(_m<10){ 
    _m = '0' + _m; 
  } 
  if(_s<10){ 
    _s = '0' + _s; 
  } 
  return _m + ':' + _s 
} 
 
v.addEventListener('timeupdate', function(){ 
  nowTime.textContent = parseTime(v.currentTime); 
}) 
 
v.addEventListener('loadedmetadata', function(){ 
  console.log('loadedmetadata') 
  duration.textContent = parseTime(v.duration); 
}) 

这里用到了两个事件：timeupdate 和 loadedmetadata。

timeupdate 事件在播放时间改变时触发，在这里我们监听播放时间的改变，然后同步更新显示。

loadedmetada 在成功获取资源长度时触发。