video视频时间单位毫秒化

2,090 阅读1分钟

为了实现video进度条已ms(毫秒)为单位

 <video
      width="100%"
      height="300"
      :id="video"
      :src="videoUrl"
      :poster="coverUrl"
      controls
      preload="none"
  ></video>
  // 给当前video加实践,监听当前进度条时间
  this.video = document.getElementById('video');
  this.video.addEventListener('timeupdate', this.getMsNumber, false);
      
  
  getMsNumber() {
      // 计算出毫秒来显示当前播放进度
      this.currentMs = Math.floor(this.video.currentTime * 1000);
  },
  
  // 停止播放
  this.video.pause();
  
  // 记得销毁的时候删除监听事件哦
  this.video.removeEventListener('timeupdate', this.addlis);
  
  // preload属性可以设置视频是否需要提前加载
  preload="none" // 用到时再加载
  
  可用的参数:
      auto - 当页面加载后载入整个视频
      meta - 当页面加载后只载入元数据
      none - 当页面加载后不载入视频
      
  // 视频总长度this.video.
  需要播放视频,监听事件执行才可以取到视频总长度