vue实现视频进度加载
实现视频进度加载的基本思路
在Vue中实现视频进度加载通常涉及监听视频的timeupdate事件，计算当前播放时间与总时长的比例，并更新进度条显示。核心是通过<video>元素的API和自定义进度条组件完成交互。
监听视频播放进度
通过@timeupdate事件监听视频播放进度变化，计算当前进度百分比：
<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：
<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>注意事项
- 确保视频元数据已加载后再操作
duration属性，可通过@loadedmetadata事件处理。 - 移动端需额外处理触摸事件（
@touchstart、@touchmove）。 - 若使用第三方UI库（如Element UI），可直接使用其进度条组件并绑定视频事件。
通过以上方法，可以实现一个交互完整的视频进度加载功能，支持播放进度显示、缓冲状态提示和用户跳转操作。
