vue-video-player 点击进度条时，如果看过了就可以返回没看过继续播放不允许点击

如果您使用的是 vue-video-player 播放器，在点击进度条时，如果已经看过了该部分视频，那么将不允许返回未看过的部分继续播放。这是因为该播放器会记录您已经观看的视频部分，以便下次播放时继续从您停止观看的位置开始播放。如果您需要返回之前的部分重新观看，您可以通过手动拖动进度条或者使用播放器自带的倒回/快进按钮实现。

相关问题

vue-video-player 点击进度条时，如果看过了就可以返回没看过继续播放不允许点击...

您可以通过监听`seeking`事件，当用户点击进度条时触发该事件，然后在事件处理程序中判断视频是否已经被看过，如果已经看过，可以通过`currentTime`属性获取当前播放进度，然后将其设置为视频的新进度。如果视频还没有被看过，则可以阻止事件的默认行为，从而禁止用户跳过未看过的部分。

以下是一个简单的示例代码：

<template>
  <div>
    <video ref="video" @seeking="handleSeeking"></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      watched: false, // 是否已经看过视频
    };
  },
  methods: {
    handleSeeking() {
      if (!this.watched) {
        // 如果还没看过视频，则阻止跳过未看过的部分
        const video = this.$refs.video;
        video.currentTime = video.duration * 0.5; // 将视频进度设置为 50%
        event.preventDefault(); // 阻止默认行为
      }
    },
  },
};
</script>

在上面的示例中，我们监听了`seeking`事件，并在事件处理程序中判断视频是否已经被看过，如果还没看过，则将视频进度设置为 50% 的位置，并阻止默认行为。如果已经看过，则什么也不做，用户可以自由地跳转进度。

vue-video-player显示进度条

要在vue-video-player中显示进度条，可以使用插件自带的控制条。控制条中包含了进度条，可以通过设置控制条的属性来控制进度条的显示。

以下是一个简单的例子，演示如何在vue-video-player中显示进度条：

<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
 </div>
</template>

<script>
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      playerOptions: {
        controls: true, // 显示控制条
        autoplay: false,
        sources: [{
          src: 'http://example.com/path/to/video.mp4',
          type: 'video/mp4'
        }]
      }
    }
  }
}
</script>

在上面的例子中，我们设置了控制条的属性`controls`为`true`，这样就会在视频播放器下方显示控制条，其中包含了进度条。