当前位置：首页 > VUE

vue实现视频进度加载

2026-01-22 08:36:58VUE

实现视频进度加载的基本思路

在Vue中实现视频进度加载通常涉及监听视频的timeupdate事件，计算当前播放时间与总时长的比例，并更新进度条显示。核心是通过<video>元素的API和自定义进度条组件完成交互。

监听视频播放进度

通过@timeupdate事件监听视频播放进度变化，计算当前进度百分比：

vue实现视频进度加载

<template>
  <div>
    <video 
      ref="videoPlayer" 
      @timeupdate="updateProgress" 
      src="your-video.mp4"
    ></video>
    <div class="progress-bar" :style="{ width: progress + '%' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    updateProgress() {
      const video = this.$refs.videoPlayer;
      this.progress = (video.currentTime / video.duration) * 100;
    }
  }
};
</script>

自定义进度条交互

允许用户点击进度条跳转到指定位置，需处理click事件并更新视频的currentTime：

vue实现视频进度加载

<template>
  <div class="progress-container" @click="seek">
    <div class="progress-bar" :style="{ width: progress + '%' }"></div>
  </div>
</template>

<script>
export default {
  methods: {
    seek(event) {
      const progressContainer = event.currentTarget;
      const clickPosition = event.offsetX;
      const containerWidth = progressContainer.clientWidth;
      const percentage = (clickPosition / containerWidth) * 100;
      this.$refs.videoPlayer.currentTime = (percentage / 100) * this.$refs.videoPlayer.duration;
    }
  }
};
</script>

显示缓冲进度

通过<video>的buffered属性获取已缓冲的范围，并更新UI：

updateBufferProgress() {
  const video = this.$refs.videoPlayer;
  if (video.buffered.length > 0) {
    const bufferedEnd = video.buffered.end(video.buffered.length - 1);
    this.bufferProgress = (bufferedEnd / video.duration) * 100;
  }
}

完整组件示例

结合进度条、缓冲条和交互的完整组件：

<template>
  <div>
    <video 
      ref="videoPlayer" 
      @timeupdate="updateProgress" 
      @progress="updateBufferProgress"
      src="your-video.mp4"
    ></video>
    <div class="progress-container" @click="seek">
      <div class="buffer-bar" :style="{ width: bufferProgress + '%' }"></div>
      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      bufferProgress: 0
    };
  },
  methods: {
    updateProgress() {
      const video = this.$refs.videoPlayer;
      this.progress = (video.currentTime / video.duration) * 100;
    },
    updateBufferProgress() {
      const video = this.$refs.videoPlayer;
      if (video.buffered.length > 0) {
        const bufferedEnd = video.buffered.end(video.buffered.length - 1);
        this.bufferProgress = (bufferedEnd / video.duration) * 100;
      }
    },
    seek(event) {
      const progressContainer = event.currentTarget;
      const clickPosition = event.offsetX;
      const percentage = (clickPosition / progressContainer.clientWidth) * 100;
      this.$refs.videoPlayer.currentTime = (percentage / 100) * this.$refs.videoPlayer.duration;
    }
  }
};
</script>

<style>
.progress-container {
  height: 5px;
  background: #ddd;
  cursor: pointer;
  position: relative;
}
.progress-bar {
  height: 100%;
  background: #42b983;
  position: absolute;
  z-index: 2;
}
.buffer-bar {
  height: 100%;
  background: #ccc;
  position: absolute;
  z-index: 1;
}
</style>