### 如何在
Vue 中为 `video`
标签添加进度条标记并实现自定义播放位置指示
为了实现在
Vue 项目中的 `video`
标签上显示进度条标记以及允许用户点击进度条来跳转到特定时间点的功能，可以按照如下方法操作：
#### 创建 Video 组件
首先创建一个新的
Vue 组件用于封装带有增强功能的 `<video>` 元素。
```
vue
<template>
<div class="video-container">
<!-- 视频播放器 -->
<video ref="myVideoPlayer" @timeupdate="onTimeUpdate"></video>
<!-- 进度条容器 -->
<div class="progress-bar-wrapper" @click="onClickProgress">
<div class="buffered-progress" :style="{ width: bufferedWidth + '%' }"></div>
<div class="played-progress" :style="{ width: playedWidth + '%' }"></div>
</div>
<!-- 时间戳标记列表 (假设这些标记由父级传递进来)-->
<ul v-if="marks
.length > 0" class="timestamp-marks">
<li v-for="(mark, index) in marks" :key="index"
:class="[isMarkVisible(mark
.time), 'mark-item']"
:style="{left: calculatePosition(mark
.time)}">{{ mark
.label }}</li>
</ul>
</div>
</template>
<script>
export default {
props: ['src', 'marks'], // 接收外部
传入的视频源文件路径和时间戳标记数组
data() {
return {
currentPlayedPercent: 0,
maxBufferedPercent: 0,
duration: null,
};
},
computed: {
playedWidth() {
return
this.currentPlayedPercent * 100;
},
bufferedWidth() {
return
this.maxBufferedPercent * 100;
}
},
mounted() {
const player =
this.$refs
.myVideoPlayer;
// 设置视频资源地址
player
.src =
this.src;
// 加载元数据完成事件处理程序
player
.addEventListener('loadedmetadata', () => {
this.duration = player
.duration;
});
},
methods: {
onTimeUpdate(event) {
let percent = event
.target
.currentTime /
this.duration || 0;
this.currentPlayedPercent = Math
.min(percent, 1);
// 更新缓冲百分比
if (!isNaN(
this.duration)) {
var bufferEnd = 0;
for(var i=0;i<
this.$refs
.myVideoPlayer
.buffered
.length && bufferEnd<=
this.$refs
.myVideoPlayer
.currentTime;i++){
bufferEnd=
this.$refs
.myVideoPlayer
.buffered
.end(i);
}
this.maxBufferedPercent = bufferEnd/
this.duration;
}
},
onClickProgress(e){
const rect = e
.currentTarget
.getBoundingClientRect();
const clickX = e
.clientX - rect
.left;
const newCurrentTime = (clickX / rect
.width)*
this.duration;
this.$refs
.myVideoPlayer
.currentTime=newCurrentTime;
},
isMarkVisible(timeStamp){
return ((
this.currentPlayedPercent >= timeStamp-
this.duration*0
.02)&&(
this.currentPlayedPercent <= timeStamp+
this.duration*0
.02))? "visible":"hidden";
},
calculatePosition(timeStamp){
return `${(timeStamp/
this.duration)*100}%`;
}
}
};
</script>
<style scoped>
.video-container{
position:relative;
}
.progress-bar-wrapper,
.played-progress,
.buffered-progress{
height:
.5em;background-color:#ddd;width:100%;position:absolute;top:100%;
}
.played-progress{background:green;left:0;}
.buffered-progress{background:red;z-index:-1;}
.timestamp-marks{
list-style:none;padding-left:0;margin-top:
.6em;height:1rem;line-height:1rem;font-size:
.8rem;text-align:center;white-space:nowrap;overflow:hidden;
}
.mark-item{
display:inline-block;width:max-content;min-width:min-content;border-radius:
.2rem;padding:
.2rem
.4rem;color:white;background:black;opacity:0;transition:all ease-in-out
.3s;
transform:translateY(-10px);margin-right:
.5rem;
}
.visible{
opacity:1!important;
}
.hidden{
visibility:hidden;
}
</style>
```
此组件实现了以下特性：
- 显示已加载部分(`buffered`) 和 已播放部分 (`played`) 的进度条。
- 用户可以通过点击进度条任意位置快速定位至对应的时间节点。
- 支持展示一系列预设好的时间戳标记，并当接近该时刻时高亮显示提示文字[^1]。
扫一扫
3443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
