vue3播放video，进度条放视频外面

在Vue3中，要在视频外部显示进度条，你可以通过以下步骤来实现：

1. 首先，在HTML中创建一个`<video>`标签和一个外部的`<progress>`元素，例如：

<template>
  <div class="player">
    <video ref="videoPlayer" :src="videoSrc" @loadedmetadata="onVideoLoaded"></video>
    <div class="progress-bar-container">
      <progress :value="progress" max="100"></progress>
    </div>
  </div>
</template>

2. 然后，在CSS中设置进度条的位置和样式，通常将它放在`<video>`下方或旁边：

.progress-bar-container {
  position: relative;
  margin-top: 10px;
}

.progress {
  width: 100%;
  height: 10px;
  background-color: lightgray;
}

3. 定义数据属性来管理视频和进度：

<script setup>
import { ref } from 'vue';

const videoSrc = "your_video_url";
const videoPlayer = ref(null);
let progress = ref(0);

// 视频加载完成后更新进度条
function onVideoLoaded() {
  videoPlayer.value.addEventListener('timeupdate', handleTimeUpdate);
}

// 更新进度条值
function handleTimeUpdate() {
  const currentTime = videoPlayer.value.currentTime;
  progress.value = Math.floor(currentTime * 100); // 或者使用 videoPlayer.value.currentPercent
}
</script>

4. 在组件的生命周期钩子中初始化和卸载事件监听器：

mounted() {
  onVideoLoaded();
},
beforeUnmount() {
  videoPlayer.value.removeEventListener('timeupdate', handleTimeUpdate);
}

现在，你已经实现了在一个Vue3组件中，视频播放的进度可以在视频外部的进度条上实时显示。