vue video标签显示进度条

在Vue中，要在`<video>`标签中添加一个进度条来显示视频播放进度，你可以利用HTML5的`controls`属性，并结合JavaScript来监听`timeupdate`事件。这里是一个简单的示例：

<template>
  <div>
    <video ref="myVideo" :src="videoSrc" controls></video>
    <progress :value="currentProgress" max="100"></progress>
  </div>
</template>

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

// 初始化视频源
const videoSrc = "your-video-source.mp4";
// 初始化当前进度到0
const currentProgress = ref(0);

// 监听video元素的timeupdate事件
watch(() => currentProgress.value, () => {
  const videoElement = document.querySelector('#myVideo').currentTime; // 获取当前时间
  const progressBar = document.querySelector('progress'); // 获取进度条
  progressBar.value = Math.round(videoElement * 100); // 计算进度百分比并更新进度条值
});
</script>

在这个例子中，我们使用了`ref`来引用`<video>`元素，通过`currentTime`属性获取当前播放时间。每当视频的播放进度变化时，`timeupdate`事件触发，我们计算出进度百分比并更新`<progress>`元素的`value`。