vue3实现视频播放，允许拖动进度条，打点评论弹幕，进度条显示打点

要实现Vue3视频播放器，允许拖动进度条，打点评论弹幕，并在进度条上显示打点，可以按照以下步骤进行：

1. 安装依赖：首先，你需要安装Vue3和其他必要的依赖。

npm install vue@next video.js vue-video-player

2. 创建视频播放器组件：在Vue3中，创建一个视频播放器组件。你可以使用vue-video-player来快速实现。

<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
    <div class="progress-bar" @click="seek">
      <div class="progress" :style="{ width: progress + '%' }"></div>
      <div
        v-for="marker in markers"
        class="marker"
        :style="{ left: marker.time * 100 + '%' }"
      ></div>
    </div>
  </div>
</template>

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

export default {
  components: {
    VueVideoPlayer,
  },
  data() {
    return {
      playerOptions: {
        // 设置视频源
        sources: [
          {
            src: 'your_video_url',
            type: 'video/mp4',
          },
        ],
      },
      progress: 0,
      markers: [
        // 打点评论弹幕信息
        { time: 0.1, comment: '这是一个打点评论弹幕' },
        // ...
      ],
    };
  },
  methods: {
    // 拖动进度条
    seek(event) {
      const progressBar = event.currentTarget;
      const rect = progressBar.getBoundingClientRect();
      const offsetX = event.clientX - rect.left;
      const progress = offsetX / rect.width;
      const duration = this.$refs.videoPlayer.duration();
      const currentTime = duration * progress;
      
      this.$refs.videoPlayer.currentTime(currentTime);
    },
  },
};
</script>

<style scoped>
.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ddd;
  position: relative;
  cursor: pointer;
}

.progress {
  height: 100%;
  background-color: #333;
  width: 0;
}

.marker {
  position: absolute;
  top: -5px;
  width: 5px;
  height: 20px;
  background-color: red;
}
</style>

在这个示例中，我们首先引入了vue-video-player库，并使用该库创建了一个视频播放器组件。在组件中，我们添加了一个进度条，并通过点击进度条来实现拖动进度。我们还在进度条上使用v-for指令来显示打点的评论弹幕。

注意替换`your_video_url`为你的视频地址，并根据实际需求修改打点评论弹幕的信息。

这样，就可以实现Vue3视频播放器，允许拖动进度条，打点评论弹幕，并在进度条上显示打点的功能。你可以根据自己的需求进行定制和扩展。