请问使用vue-video-player 怎么控制进度条只能向前拖动已经观看过的视频不能向后拖动

您可以使用组件中的“loadedmetadata”事件来获取视频的总时间，并使用“timeupdate”事件来获取当前时间。然后，您可以将当前时间与已观看时间进行比较，并将剩余时间不可拖动。

具体代码示例如下：

<template>
  <div>
    <video ref="videoPlayer" controls @loadedmetadata="onLoadedMetadata" @timeupdate="onTimeUpdate">
      <source :src="videoSrc" type="video/mp4" />
    </video>
    <input type="range" ref="progressBar" v-model="currentTime" :max="duration" />
  </div>
</template>

<script>
export default {
  name: "VideoPlayer",
  data() {
    return {
      videoSrc: "your/video/source.mp4",
      duration: 0,
      currentTime: 0,
    };
  },
  methods: {
    onLoadedMetadata() {
      this.duration = Math.floor(this.$refs.videoPlayer.duration);
    },
    onTimeUpdate() {
      this.currentTime = Math.floor(this.$refs.videoPlayer.currentTime);
      if (this.currentTime >= this.duration) {
        this.$refs.progressBar.setAttribute("max", this.duration.toString());
      } else {
        this.$refs.progressBar.removeAttribute("max");
      }
    },
  },
};
</script>

在上面的示例中，我们使用$vrefsprogressBarto设置最大值。如果当前时间等于总时间，我们使用setAttribute()将最大值设置为剩余时间。如果当前时间小于总时间，则使用removeAttribute()将其移除，这样进度条就无法倒退。