vue-video-player 点击进度条时,如果看过了就可以返回没看过继续播放不允许点击...
时间: 2023-08-14 22:07:38 浏览: 154
vue-video-player.zip
您可以通过监听`seeking`事件,当用户点击进度条时触发该事件,然后在事件处理程序中判断视频是否已经被看过,如果已经看过,可以通过`currentTime`属性获取当前播放进度,然后将其设置为视频的新进度。如果视频还没有被看过,则可以阻止事件的默认行为,从而禁止用户跳过未看过的部分。
以下是一个简单的示例代码:
```javascript
<template>
<div>
<video ref="video" @seeking="handleSeeking"></video>
</div>
</template>
<script>
export default {
data() {
return {
watched: false, // 是否已经看过视频
};
},
methods: {
handleSeeking() {
if (!this.watched) {
// 如果还没看过视频,则阻止跳过未看过的部分
const video = this.$refs.video;
video.currentTime = video.duration * 0.5; // 将视频进度设置为 50%
event.preventDefault(); // 阻止默认行为
}
},
},
};
</script>
```
在上面的示例中,我们监听了`seeking`事件,并在事件处理程序中判断视频是否已经被看过,如果还没看过,则将视频进度设置为 50% 的位置,并阻止默认行为。如果已经看过,则什么也不做,用户可以自由地跳转进度。
阅读全文