vue视频播放进度百分比

在Vue中，你可以使用HTML5的Video API来获取视频播放的进度百分比。首先，你需在Vue组件中定义一个video元素和一个变量来存储播放进度百分比。然后，通过监听video元素的timeupdate事件，你可以计算出当前播放时间与视频总时长的比例，从而得出播放进度百分比。以下是一个示例代码：

<template>
  <div>
    <video ref="videoPlayer" @timeupdate="updateProgress"></video>
    <p>播放进度: {{ progress }}%</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    };
  },
  mounted() {
    // 获取video元素的引用
    const video = this.$refs.videoPlayer;

    // 监听video的timeupdate事件
    video.addEventListener('timeupdate', this.updateProgress);
  },
  methods: {
    updateProgress() {
      // 获取video元素的引用
      const video = this.$refs.videoPlayer;

      // 计算播放进度百分比
      const progress = (video.currentTime / video.duration) * 100;

      // 更新progress变量
      this.progress = Math.floor(progress);
    }
  }
};
</script>

在上面的示例中，通过`@timeupdate`指令将`updateProgress`方法绑定到video元素的timeupdate事件上。每当视频播放时间更新时，`updateProgress`方法会被调用并计算播放进度百分比，并将结果更新到`progress`变量中。然后，在模板中可以使用`{{ progress }}`来显示播放进度百分比。