·您当前的位置:主页 > 技术教程 > Html5技术 >

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

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

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

  1. <font id="now_time" size="3"></font>/<font id="duration" size="3"></font> 
  2.  
  3. var nowTime = document.getElementById('now_time'); 
  4. var duration = document.getElementById('duration'); 
  5.  
  6. //初始值设为0 
  7. nowTime.textContent = 0
  8. duration.textContent = 0
  9.  
  10. //currentTime 和 duration 单位都是秒,我们写一个函数来将时间显示格式变为 mm:ss。 
  11. function parseTime(time){ 
  12.   time = Math.floor(time); 
  13.   var _m, _s; 
  14.   _m = Math.floor(time/60); 
  15.   _s = time - _m*60; 
  16.   if(_m<10){ 
  17.     _m = '0' + _m; 
  18.   } 
  19.   if(_s<10){ 
  20.     _s = '0' + _s; 
  21.   } 
  22.   return _m + ':' + _s 
  23.  
  24. v.addEventListener('timeupdate', function(){ 
  25.   nowTime.textContent = parseTime(v.currentTime); 
  26. }) 
  27.  
  28. v.addEventListener('loadedmetadata', function(){ 
  29.   console.log('loadedmetadata') 
  30.   duration.textContent = parseTime(v.duration); 
  31. }) 

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

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

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

热门文章

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器