vue video.js 实现进度条拖动

Vue Video.js是一个基于Vue.js和Video.js的HTML5视频播放器组件，可以帮助我们快速搭建一个美观实用的视频播放器。在Vue Video.js中，要实现进度条拖动，需要做以下几个步骤：

1.首先，在Vue Video.js中，可以通过vjs-player组件来实现视频播放功能，我们需要给这个组件添加ref属性，以便在后面使用。

2.在vjs-player的mounted生命周期中，我们可以通过this.$refs.player来获取到video.js的player对象，然后通过player.on方法来监听时间变化事件。

3.在监听事件中，可以获取到当前播放的时间和视频总时长，从而计算出当前进度条的位置。同时，也可以监听进度条的mousedown和mousemove事件，来实现进度条拖动的功能。

4.最后，在进度条拖动结束的时候，需要通过player.currentTime()方法来设置视频的当前播放时间。

下面是相关代码片段:

<template>
  <div>
    <vjs-player ref="player" :options="playerOptions"></vjs-player>
    <div class="progress-bar-wrap">
      <div class="progress-bar" ref="progressBar" @mousedown="onProgressBarMouseDown($event)">
        <div class="progress-bar-inner" :style="{width: progressWidth}"></div>
        <div class="progress-bar-thumb" :style="{left: progressWidth}"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          src: 'https://example.com/path/to/video.mp4',
          type: 'video/mp4'
        }]
      },
      progressWidth: 0,
      isDragging: false
    }
  },
  mounted() {
    const player = this.$refs.player.$player
    player.on('timeupdate', () => {
      const currentTime = player.currentTime()
      const duration = player.duration()
      this.progressWidth = `${(currentTime / duration) * 100}%`
    })
    document.addEventListener('mousemove', this.onDocumentMouseMove)
    document.addEventListener('mouseup', this.onDocumentMouseUp)
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.onDocumentMouseMove)
    document.removeEventListener('mouseup', this.onDocumentMouseUp)
  },
  methods: {
    onProgressBarMouseDown(event) {
      this.isDragging = true
      this.onDocumentMouseMove(event)
    },
    onDocumentMouseMove(event) {
      if (!this.isDragging) return
      const progressBar = this.$refs.progressBar
      const rect = progressBar.getBoundingClientRect()
      const progressWidth = ((event.clientX - rect.left) / rect.width) * 100
      this.progressWidth = `${Math.min(Math.max(progressWidth, 0), 100)}%`
    },
    onDocumentMouseUp() {
      if (!this.isDragging) return
      const player = this.$refs.player.$player
      const duration = player.duration()
      player.currentTime(duration * (parseInt(this.progressWidth) / 100))
      this.isDragging = false
    }
  }
}
</script>

<style>
.progress-bar-wrap {
  width: 100%;
  height: 8px;
  background-color: #f2f2f2;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.progress-bar-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #00bfff;
}

.progress-bar-thumb {
  position: absolute;
  top: -5px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #00bfff;
}
</style>