Vue3编写视频播放功能，并获取进度条

下面是一个简单的示例，演示如何用Vue3编写一个视频播放功能，并获取进度条：

<template>
  <div>
    <video ref="videoPlayer" :src="videoUrl" @timeupdate="handleTimeUpdate"></video>
    <input type="range" v-model="progress" min="0" :max="duration" step="0.1" @input="handleProgressChange">
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  data() {
    return {
      videoUrl: 'your_video_url',
      progress: 0,
      duration: 0,
    };
  },
  mounted() {
    // 监听视频加载完成事件，获取视频总时长
    this.$refs.videoPlayer.addEventListener('loadedmetadata', () => {
      this.duration = this.$refs.videoPlayer.duration;
    });
  },
  methods: {
    handleTimeUpdate() {
      // 根据视频当前播放时间计算进度条的值
      this.progress = (this.$refs.videoPlayer.currentTime / this.duration) * 100;
    },
    handleProgressChange() {
      // 根据进度条的值计算视频的播放时间
      const currentTime = (this.progress / 100) * this.duration;
      this.$refs.videoPlayer.currentTime = currentTime;
    },
  },
};
</script>

在模板中，使用<video>元素来展示视频，并通过ref属性引用它。视频的src属性绑定到videoUrl，当视频加载完成时，使用@timeupdate事件监听视频的播放时间更新，调用handleTimeUpdate方法来更新进度条的值。

进度条使用<input type="range">元素，通过v-model指令绑定到progress属性，该属性代表进度条的值。进度条的最小值是0，最大值是视频的总时长，步长为0.1。当进度条的值发生变化时，调用handleProgressChange方法来更新视频的播放时间。

在mounted钩子中，使用原生的addEventListener方法监听loadedmetadata事件，该事件在视频加载完成后触发，通过this.$refs.videoPlayer.duration获取到视频的总时长，赋值给this.duration。

需要将your_video_url替换成你实际的视频链接。同时，也可以根据需要对样式进行自定义。