video视频禁止快进，禁止倍速

麻辣_水煮鱼

于 2024-06-26 15:21:39 发布

阅读量376

点赞数 5

文章标签：前端 video javascript

本文链接：https://blog.csdn.net/weixin_42217154/article/details/139864586

版权

最近的需求，是在线学习观看视频时不允许用户快进和倍速观看，实现代码如下：

<video v-else ref="videoPlayer" width="760" height="450" controls autoplay @timeupdate="timeupdate" @ended="videoEnded" @play="onPlay" @ratechange="onRateChange">
     <source :src="recObj.filepath"  type="video/mp4">
     <source :src="recObj.filepath" type="video/ogg">
     <source :src="recObj.filepath" type="video/webm">
     您的浏览器不支持 video 标签。
</video>

timeupdate(e) {//视频禁止快进。可以拖动滚动条 但是还是松开鼠标还是停留在当前位置，如果滚动条后拉的话还是可以快进到最快的位置
    // console.log(e.srcElement.currentTime - this.currTime);
    if (e.srcElement.currentTime - this.currTime > 1) {
         e.srcElement.currentTime = this.currTime>this.maxTime?this.currTime:this.maxTime;
         // console.log("快进了");
    }
    this.currTime = e.srcElement.currentTime;//视频当前进度
    this.maxTime = this.currTime>this.maxTime?this.currTime:this.maxTime;//视频浏览的最大进度
    // console.log("视频记录", e.srcElement.currentTime);
    // console.log("本地记录", this.currTime);
},
onPlay() { 
    this.$refs.videoPlayer.playbackRate = 1.0;
},
onRateChange() {//播放速度不可倍速
    if (this.$refs.videoPlayer.playbackRate !== 1.0) {
         this.$refs.videoPlayer.playbackRate = 1.0;
    }
}