video.js只允许回退不允许快进支持加载时跳转到上次播放时间

新之助程序员版

已于 2022-11-09 18:25:00 修改

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 开发语言

于 2022-11-09 18:24:04 首次发布

本文链接：https://blog.csdn.net/liu_131421/article/details/127774941

这篇博客介绍了如何使用video.js库来管理和控制视频播放，特别是记录用户的观看进度，并防止用户快进。通过监听timeupdate事件，当播放时间超过之前的最大观看时间且时间差小于3秒时更新最大观看时间。同时，在播放时根据是否为首次观看来决定跳转到上次观看位置或限制快进，只允许回退。这是一个有效的视频播放控制策略，适用于在线教育或视频点播平台。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//所需参数
data() {
    return {
        videoInfo: {
                    //当前观看的最大时间
                    watchMaxTime: 0,
                    //是否是第一次观看
                    isFirstWatch: true
                },
    }
}

//方法内容
initVideo(){
    var that = this;
    let myPlayer = videojs(document.getElementById('myVideo'), {
                       controls: true,
                       autoplay: false,
                       preload: 'auto',
                       fluid: true, //流畅模式
                       controlsBar: {
                           loop: true,
                           playToggle: true,
                           timeDivider: true, // 当前时间和持续时间的分隔符
                           durationDisplay: true, // 显示持续时间
                           remainingTimeDisplay: true, // 是否显示剩余时间功能
                           fullscreenToggle: true, // 是否显示全屏按钮
                       }
                   }, function () {
                          //该处可以写各种事件 如暂停、播放...
                          //播放事件改变事件
                            this.on('timeupdate', function () {
                                //记录视频播放最大的时间
                                if (this.currentTime() > that.videoInfo.watchMaxTime) {
                                    //但如果相差3秒就证明肯定是往后拖时间了 因为正常来说是0.3秒更新一次
                                    var num = parseFloat(this.currentTime()) - parseFloat(that.videoInfo.watchMaxTime);
                                    if (num < 3 || that.videoInfo.isFirstWatch) {
                                        that.videoInfo.watchMaxTime = this.currentTime()
                                    }
                                }
                            })
                            //播放事件 在播放时跳转到上次观看位置和禁止快进支持回退
                            this.on('play', function () {
                                //第一次触发跳转到上次播放记录时间
                                if (that.videoInfo.isFirstWatch) {
                                    that.videoInfo.isFirstWatch = false;
                                    //将播放时间从时分秒转为秒
                                    //time等于上次播放时间可以根据业务调整
                                    var time = '01:02:03';
                                    var hour = time.split(':')[0];
                                    var min = time.split(':')[1];
                                    var sec = time.split(':')[2];
                                    var playTiem = Number(hour * 3600) + Number(min * 60) + Number(sec);
                                    //记录最大观看时间
                                    that.videoInfo.watchMaxTime = playTiem
                                    //将视频播放条跳转到该时间位置
                                    this.currentTime(playTiem);
                                 } else {
                                    //不是第一次观看视频的话 只允许回退不允许快进
                                    //如果当前播放时间大于最大观看时间则跳回最大观看时间
                                    if (this.currentTime() > that.videoInfo.watchMaxTime) {
                                        this.currentTime(that.videoInfo.watchMaxTime);
                                     }
                                 }
                            });
                    }

}

在网上查找了很多大佬写的代码但是发现video.js的timeupdate 事件哪怕快进拖动也会一起改变watchMaxTime的值，所以才根据播放时间和最大观看时间之间是否相差了3秒来判断是否拖动，之后如果有更好的方法在进行调整。如果大家有更好的方法欢迎交流。