element slider 视频进度条处理

1,771 阅读1分钟
<!--进度条-->
<div data-flex="cross:center" data-flex-box="1" class="zb-slider">
  <span class="time">{{ currentTime | formatSecond }}</span>
  <el-slider class="m-h-13" :min="0" :max="duration" v-model="sliderTime" :format-tooltip="formatTooltip" @change="hChange" @input="hInput"></el-slider>
  <span class="time">{{ duration | formatSecond }}</span>
</div>

currentTime为视频当前播放时间
duration为视频总时长
hChange (val) {
  this.$refs.video.currentTime = val
  // this.videoPlay()
},
hInput (val) {
  this.currentTime = val
},
formatTooltip(val) {
  return realFormatSecond(this.currentTime)
},
timeupdate(e) {
  this.currentTime = e.target.currentTime;
}