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

<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;
    }
}

Logo

一站式 AI 云服务平台

更多推荐