vue2使用vant-slider 组件自定义video进度条

模板写法:

	// 配置/样式自行调整
            <video
              :ref="`video${index}`"
              controlslist="nodownload nofullscreen noremoteplayback noplaybackrate"
              class="video_box"
              disablePictureInPicture
              controls
              width="100%"
              height="100%"
              webkit-playsinline="true"
              x5-playsinline=""
              x5-video-player-type="h5"
              x5-video-player-fullscreen=""
              playsinline
              preload="auto"
              :poster="item.cover"
              :src="item.url"
              @timeupdate="updateProgressBar(index)"
              :playOrPause="playOrPause"
              x-webkit-airplay="allow"
              x5-video-orientation="portrait"
              @click="pauseVideo"
              @ended="onPlayerEnded($event)"
              loop="loop"
            ></video>
           <div class="custom-progress-bar"
          >
            <van-slider v-model="videoProgress[index]" @change="onSliderChange($event, index)" button-size="10" active-color="#fff"/>
          </div>

逻辑层写法:

    onSliderChange (e, index) {
      const video = this.$refs[`video${index}`][0]
      video.currentTime = (e / 100) * video.duration
    },
    updateProgressBar (index) {
      const video = this.$refs[`video${index}`][0]
      if (video) {
        this.$set(this.videoProgress, index, (video.currentTime / video.duration) * 100)
      }
    },

重写video样式需要把原生按钮隐藏掉

// 根据你的业务自行调整
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
/* //播放按钮 */
video::-webkit-media-controls-play-button {
    display: none;
}
//进度条
video::-webkit-media-controls-timeline {
    display: none;
    // display: inline-block;
    // position: absolute;
    // bottom: -100px;
}
/* //观看的当前时间 */
video::-webkit-media-controls-current-time-display{
    display: none;
}
/* //剩余时间 */
video::-webkit-media-controls-time-remaining-display {
    display: none;
}
/* //音量按钮 */
video::-webkit-media-controls-mute-button {
    display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;
}
/* //音量的控制条 */
video::-webkit-media-controls-volume-slider {
    display: none;
}
/* 确保视频进度条始终可见 */
video::-webkit-media-controls-timeline {
  display: inline-box;
}
video::-moz-media-controls-timeline {
  display: inline-box;
}