vue 中实现音视频播放进度条（可拖拽，满足常见开发需求）

在Vue中实现可拖拽的音视频播放进度条，可以通过监听和设置视频元素的timeupdate和loadedmetadata事件来实现。以下是一个简单的Vue组件示例：

<template>
  <div>
    <video ref="video" @loadedmetadata="setVideoDuration" @timeupdate="updateProgress" controls>
      <source src="your-video-file.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div class="progress-bar" @click="seek">
      <div class="progress" :style="{ width: progress + '%' }"></div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      videoDuration: 0,
      progress: 0
    };
  },
  methods: {
    setVideoDuration() {
      this.videoDuration = this.$refs.video.duration;
    },
    updateProgress() {
      const video = this.$refs.video;
      this.progress = (video.currentTime / video.duration) * 100;
    },
    seek(event) {
      const video = this.$refs.video;
      const rect = event.target.getBoundingClientRect();
      const x = event.clientX - rect.left; // account for any borders
      const percentage = x / rect.width;
      video.currentTime = this.videoDuration * percentage;
    }
  }
};
</script>
 
<style>
.progress-bar {
  width: 100%;
  height: 5px;
  background-color: #ddd;
  cursor: pointer;
  position: relative;
}
 
.progress {
  width: 0%;
  height: 100%;
  background-color: #007bff;
  transition: width 0.05s;
  position: absolute;
}
</style>

在这个组件中，<video>元素用于播放视频，并包含了视频文件的路径。progress-bar和progress两个div分别用于显示和更新进度条的视觉效果。timeupdate事件用于更新当前播放的进度，loadedmetadata事件用于获取视频总时长。seek方法通过点击事件处理函数来更新视频的当前时间，实现拖拽功能。