ckplayer 播放插件

官网：ckplayer

1、添加签到弹出层（弹幕--弹幕内容自定义）

（样式效果：视频播放，在4秒弹窗签到）

@*获取基本信息*@
@Html.Raw(this.ViewBag.coursebasicinfoarr)
<script>var videobaiscinfo = {courseid: "11006302", coursename: "职业技能鉴定培训", lessonindex: "3", teacherloginid: "20060140", stuloginid: "00000001", termid: "20221", weekid: "1", zc: "15", url: "/Data/CourseWare/47EAC45B-E294-48D2-8428-862AA0AED662/video1.mp4", imgurl: "/Data/CourseWare/47EAC45B-E294-48D2-8428-862AA0AED662/thumb1.jpg", guid: "47EAC45B-E294-48D2-8428-862AA0wAED664", teachername: "张莉"};</script>

@*在线重修系统配置*@
@Html.Raw(this.ViewBag.srcconfig)
<script>var srcconfig = {soft_name: "在线重修系统", set_s_isrun: "True", set_c_isrun: "True",checkcontinuet: "1",checkstep: "60",checkcount:"6"};</script>

<script>  
var lastet = parseInt('@this.ViewBag.lastet');//最后一次观看截止时间 (上次截止时间秒)
    var _baseurl = '@this.ViewBag.oceconfig.us_http_static';
    var player; //播放器对象
    var videoObject = {
        container: '#recoursevideo', //容器的ID或className
        volume: 0.8,//默认音量为0.8
        video: _baseurl+videobaiscinfo.url ,
        //logo: _baseurl +videobaiscinfo.imgurl,
    };
    //var ifrecord = true;//是否记录学习日志
    var ifplay = false;//录屏播放状态
    var playindex = 0;//点击播放次第
    var remark = "";//观看说明
    var rindex = 1;//观看日志次第
    var lguid = "";//学习记录编号
    var vcheckcount = "";//当前录屏需要考勤次数
    var randomarr = new Array();   //获取随机签到值区间数组(秒)
    var ifcheckstop = false;//由于检查出勤暂停视频不需要重新生成随机签到数组 是考勤暂停为true
    var check_layer;//考勤弹出层
    let checkcanvas = document.getElementById('checkcanvas');//画布对象
    let show_num = [];//装验证码的数组
    var checkttext=0;//考勤倒计时文本
    var checkt_setInterval;//考勤持续时长定时函数
    //弹出层关闭返回
    /**
     * IfPlay 录屏是否播放状态，
     * */
    var returnd = { "IfPlay": ifplay, "LGUID": "" , "LID": videobaiscinfo.guid, "TermID": videobaiscinfo.termid, "CourseID": videobaiscinfo.courseid, "StartDate": "", "EndDate": "", "StudyDuration": "0", "Browser": "","Remark":"","VSTime":0,"VETime":0 };
</script>

<style>
    .us-managerbody {
        margin: 0px;
    }

    .recoursevideo {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .container {
        height: 100%;
        width: 100%;
        position: absolute;
    }

    .checkelementtemp {
        height: 200px;
        width: 400px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex !important;
        flex-direction: column;
        border: 1px solid white;
        background: white;
    }

    .top {
        flex: 1;
        /*background: red;*/
    }

    .middle {
        flex: 2;
        /*background: yellow;*/
    }

    .middlecontent {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        transform: translate(-50%, -50%);
    }

    .middle .mcinput {
        height: 100%;
        float: left;
    }

    .middle div input {
        height: 38px;
        width: 150px;
    }

    .bottom {
        flex: 1;
        display: flex;
        /*background: green;*/
    }

        .bottom .left {
            flex: 1;
        }

        .bottom .right {
            flex: 1;
        }

            .bottom .right button {
                float: right;
                width: 60px;
                margin-right: 8px;
            }

    .usnboxbottom {
        border-top: 1px solid #EEF1F5;
        line-height: 28px;
        padding: 8px;
        height: 30px;
        width: 100%;
    }

        .usnboxbottom .usnboxleft span {
            color: #aaaaaa;
        }

        .usnboxbottom .usnboxright button {
            height: 30px;
            line-height: 30px;
        }
</style>
<div class="container">
    //放置录屏div
    <div id="recoursevideo" class="recoursevideo">
    </div>
    //弹窗div
    <div class="checkelementtemp" id="checkelementtemp">
        <div class="top">
            <div class="usnboxtop">
                <div class="usnboxleft"><i class="us-icon">&#xe6ca;</i>考勤签到</div>
                <div class="usnboxright">
                </div>
            </div>
        </div>
        <div class="middle">
            <div class="middlecontent">
                <div class="mcinput"><input type="text" name="login_code" id="login_code" placeholder="请输入验证码"></div>
                <canvas id="checkcanvas" class="codecanvas" style="height:40px;width:130px">
                </canvas>
            </div>
        </div>
        <div class="bottom">
            <div class="usnboxbottom">
                <div class="usnboxleft"><span>倒计时：<em id="checkt"></em></span></div>
                <div class="usnboxright">
                    <button class="layui-btn">签到</button>
                </div>
            </div>
        </div>
    </div>
</div>    

 var player; //播放器对象
var videoObject = {
        container: '#recoursevideo', //容器的ID或className
        volume: 0.8,//默认音量为0.8
        video: _baseurl+videobaiscinfo.url ,
        //logo: _baseurl +videobaiscinfo.imgurl,
};
$(function () {
    //隐藏签到弹窗
    document.getElementById("checkelementtemp").style.visibility = "hidden";
    getplayer();
})
//#region 初始化播放器对象
function getplayer() {
    player = new ckplayer(videoObject);
    player.volume(0.5);//修改音量为0.5

    if (lastet > 0) {
        player.seek(lastet);
        //ifrecord = false;//不用记录学习日志
    }
    //创建监听事件
    addmonitor();
}
//#endregion
//#region monitor() 创建监听事件    播放、暂停
function addmonitor() {
    //监听播放
    player.play(function () {
        ifplay = true;
        playindex = playindex + 1;
        var stime = usdate.us_date_format(new Date(), "yyyy-MM-dd hh:mm:ss");
        //录屏有观看记录
        if (lastet > 0) {
            //某次播放是否需要记录学习日志
            //(只有第二次点击播放记录学习日志(用户手动点击)，第一次默认seek点了一次)
            if (playindex == 2) {
                returnd.StartDate = stime;
                returnd.EndDate = stime;
                returnd.VSTime = Math.floor(player.time());//开始学习录屏时间,秒
                record_remark("开始学习", stime);
                recordstudylog();
            }
            else {
                if (!ifcheckstop) {
                    record_remark("继续学习", stime);
                }
            }
        }
        else {
            //第一次点击播放才需要记录学习日志
            if (playindex == 1) {
                returnd.StartDate = stime;
                returnd.EndDate = stime;
                returnd.VSTime = Math.floor(player.time());//开始学习录屏时间,秒
                record_remark("开始学习", stime);
                recordstudylog();
            }
            else {
                if (!ifcheckstop) {
                    record_remark("继续学习", stime);
                }
            }
        }

        //监听开启考勤
        //由于检查出勤暂停情况不需要重新开启考勤
        if (!ifcheckstop) {
            create_check();
        }
        //恢复ifcheckstop默认为false;
        if (ifcheckstop) {
            ifcheckstop = false;
        }
        //监听录屏播放时长
        addmonitor_vtime();
    });
    //监听暂停
    player.pause(function () {
        ifplay = false;
        if (ifcheckstop) {
            record_remark("考勤", usdate.us_date_format(new Date(), "yyyy-MM-dd hh:mm:ss"));
        }
        else {
            record_remark("暂停录屏", usdate.us_date_format(new Date(), "yyyy-MM-dd hh:mm:ss"));
        }

        //取消监听播放时间
        remove_vtime_listener();
        console.error("暂停");
    });
}
//#endregion

//#region 创建考勤
function create_check() {
    //考勤次数
    var checkcount = srcconfig.checkcount;
    //考勤步长
    var checkstep = srcconfig.checkstep;
    //根据考勤次数和考勤步长计算平均多长时间一次，得出平均多长时间考勤一次
    var timestep = Math.ceil(checkstep / checkcount);

    //获取总时长
    //var v_counttime = Math.floor( Math.floor(player.duration())/60);
    var v_counttime = Math.floor(Math.floor(player.duration()) / 60);
    vcheck(timestep, v_counttime);
}
//#endregion

//#region 考勤
/**
 * 考勤
 * @param {any} timestep 平均多少分钟考勤一次，分钟
 * @param {any} v_counttime 视频总时长 ,分钟
 */
function vcheck(timestep, v_counttime) {
    //视频总时长大于平均多少分钟考勤一次，分钟
    if (v_counttime >= timestep) {
        vcheckcount = Math.floor(v_counttime / timestep);
        //视频时长根据考勤次数分隔时间数组 单位秒
        var vtimearr = new Array();
        for (var i = 0; i < vcheckcount; i++) {
            vtimearr[i] = (i + 1) * timestep * 60;
        }
        //获取随机值区间数组
        for (var i = 0; i < vcheckcount; i++) {
            if (i == 0) {
                m = timestep * 60;
                n = vtimearr[i + 1];
            }
            else {
                m = vtimearr[i - 1];
                n = vtimearr[i];
            }
            randomarr[i] = Math.floor(Math.random() * (m - n)) + n;
        }
    }
}
//#endregion

//#region 添加监听播放时间事件
function addmonitor_vtime() {
    //t=当前播放时间
    player.time(function (t) {
        t = Math.floor(t);
        //for (var i = 0; i < randomarr.length; i++) {
            //if (t == randomarr[i]) {
            if (t == 4) {
                console.error("考勤");
                //添加弹窗进行考勤
                ifcheckstop = true;
                //暂停录屏
                player.pause();
                //开启考勤弹窗
                open_check_layer();
                //生成随机验证码
                draw(show_num);
                //考勤倒计时
                checkt_text();
            }
        //}
    });
}

//#endregion

//#region 取消监听播放时间
function remove_vtime_listener() {
    player.removeListener('time', "");
}

//#endregion

//#region //开启考勤弹窗
function open_check_layer() {
    //开启弹窗
    document.getElementById("checkelementtemp").style.visibility = "visible";//显示
    check_layer =  player.layer('.checkelementtemp');
}
//#endregion

//#region 随机考勤验证码

//产生随机颜色
function randomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ") "
}
//画布
function draw(show_num) {
    let canvas_clientWidth = checkcanvas.clientWidth//画布长度
    let canvas_clientHeight = checkcanvas.clientHeight//画布高度
    let context = checkcanvas.getContext("2d")//画布环境 创建 context 对象：
    checkcanvas.width = canvas_clientWidth
    checkcanvas.height = canvas_clientHeight
    let str = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
    let astr = str.split(',');//分割字符串形成数组
    let sLength = astr.length;//数组长度
    for (let i = 0; i <= 3; i++) {
        let j = Math.floor(Math.random() * sLength);//随机索引
        let deg = Math.random() * 30 * Math.PI / 180;//0-30随机弧度
        let text = astr[j];//随机字符
        show_num[i] = text//验证码字符数组
        let x = 10 + i * 20//x坐标
        let y = 20 + Math.random() * 8//y坐标
        //位移 旋转角度 颜色 文字 样式开始位置
        context.font = 'bold 23px 微软雅黑'
        context.translate(x, y);
        context.rotate(deg);
        context.fillStyle = randomColor();
        context.fillText(text, 0, 0)
        context.rotate(-deg)
        context.translate(-x, -y)
    }
    //验证码显示小点
    for (let i = 0; i <= 30; i++) {
        context.strokeStyle = randomColor()//设置随机色用小点的颜色
        context.beginPath();//开始一条路径
        let m = Math.random() * canvas_clientWidth;
        let n = Math.random() * canvas_clientHeight;
        context.moveTo(m, n)//移动
        context.lineTo(m + 1, n + 1);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
        context.stroke();//画上面定义好的路径
    }
    //验证码显示线条
    for (let i = 0; i < 8; i++) {
        context.strokeStyle = randomColor()
        context.beginPath()
        context.moveTo(Math.random() * canvas_clientWidth, Math.random() * canvas_clientHeight);
        context.lineTo(Math.random() * canvas_clientWidth, Math.random() * canvas_clientHeight)
        context.stroke()
    }
    canvas_onclick();
}
function canvas_onclick() {
    //画布点击事件
    checkcanvas.onclick = () => {
        draw(show_num);
        //console.log(show_num);
    }
}

//#endregion

//#region 签到倒计时 
function checkt_text() {
    checkttext = srcconfig.checkcontinuet * 60;
    checkt_setInterval = setInterval(function () {
        if (checkttext == 0) {
            checkttext = 0;
        }
        else {
            checkttext = checkttext - 1;
        }
        setcheckttext(checkttext);
    }, 1000);
}
/**
 * 显示倒计时文本
 * @param {any} t 
 */
function setcheckttext(t) {
    var day_ele = document.getElementById("checkt");
    day_ele.innerHTML = t;
}
//#endregion