$(function () { //界面初始化 window.loyout.load(); }); //布局 (function () { var loyout = { //是否视频全屏,即章节列表是否折叠 fullScreen: false, load: function () { this.init(); this.event(); }, //初始化页面布局 init: function () { $("#MainBox").height($(window).height()); //设置视频播放高度 var hg = $(window).height() - $("#mainTop").height() - $("#playerInfo").height(); $("#videobox").height(hg - 70); //中间分隔线的高度设置 $("#median").height($(window).height()).find("span").width($("#median").width()+2); //章节区域高度设置 $(".itemList").height($(window).height() - $(".boxBar").height() - 30); //习题的高度 $("#Exercises").height($(window).height() - $(".mainTop").height()); // if (loyout.fullScreen) { $("#MainBox,#videobox").width($(window).width() * 0.99); $("#outlineBox,.itemList").width($(window).width() * 0.1); } else { $("#MainBox,#videobox").width($(window).width() * 0.79); $("#outlineBox,.itemList").width($(window).width() * 0.19); } //内容区的大小 $("#details").height($("#MainBox").height() - $(".mainTop").height() - 20); //当前章节高亮显示 $(".outline .olitem").each(function () { var id = $("body").attr("olid"); var olid = $(this).attr("olid"); if (id == olid) $(this).addClass("current"); if (id == "") $(".outline .olitem:eq(0)").addClass("current"); }); //是否有视频 $(".olitem").each(function () { var isvideo=$(this).attr("isvideo"); if(isvideo=="True")$(this).addClass("li-video"); }); }, //事件 event: function () { //分隔栏事件 $("#median").click(function () { if (!window.loyout.fullScreen) { $("#outlineBox").animate({ width: 100 }, 500, function () { $(this).hide(); }); $("#MainBox,#videobox").animate({ width: $(window).width() * 0.99 }, 500); $("#btnClose, #btnOpen").toggle(); } else { $("#MainBox, #videobox").animate({ width: $(window).width() * 0.79 }, 500); $("#outlineBox").animate({ width: $(window).width() * 0.2 }, 300, function () { $(this).slideDown(200); }); $("#btnClose, #btnOpen").toggle(); } window.loyout.fullScreen = !window.loyout.fullScreen; }); //知识库的按钮 $("#btnKnowledge").click(function(){ new top.PageBox('课程知识库','Knowledges.ashx?couid='+$().getPara("couid"),100,100,null,window.name).Open(); return false; }); //设置标题栏的事件 (function setInitTilte() { //取当前状态值 var stateCurr = $().getPara("state"); //当前标题栏 var currtit = $("a.titBox:first"); if (stateCurr != "") { $("a.titBox").each(function (index, element) { var href = $(this).attr("href"); var rs = new RegExp("(^|)state=([^\&]*)(\&|$)", "gi").exec(href), tmp; var state = 0; if (tmp = rs) state = tmp[2]; if (stateCurr == state) currtit = $(this); }).removeClass("titCurr"); } currtit.addClass("titCurr"); try { var func = eval("setInit_" + state); if ("undefined" != typeof (func) && func != null) func(); } catch (e) { } })(); } }; window.loyout = loyout; $(window).resize(function () { window.loyout.init(); }); })(); //习题界面的初始化 function setInit_4() { var frame = $("#Exercises"); frame.height($(window).height() - $(".mainTop").height()); } //如果你不需要某项设置,可以直接删除,注意var flashvars的最后一个值后面不能有逗号 function loadedHandler() { //上次播放进度 var history = $().cookie("outlineVideo_" + $().getPara('olid')); $("#historyTime").text(history); if (history == null) $(".historyInfo").hide(); if (CKobject.getObjectById('ckplayer_videobox').getType()) {//说明使用html5播放器 //CKobject.getObjectById('ckplayer_videobox').addListener('paused', pausedHandler); //alert(CKobject.getObjectById('ckplayer_videobox').innerHTML); //CKobject.getObjectById('ckplayer_videobox').addListener('time', timeHandler); CKobject.getObjectById('ckplayer_videobox').addListener('play', function (b) { //setT = window.setInterval(setIntervalFunction, 1000); }); CKobject.getObjectById('ckplayer_videobox').addListener('pause', function (b) { //if (setT != null) window.clearInterval(setT); }); CKobject.getObjectById('ckplayer_videobox').addListener('time', timeHandler); } else { CKobject.getObjectById('ckplayer_videobox').addListener('paused', 'pausedHandler'); CKobject.getObjectById('ckplayer_videobox').addListener('time', 'timeHandler'); } } /*当窗体失去焦点就停止播放,得到焦点继续播放,如果失去焦点前已经暂停,则保持原状态*/ $(window).blur(function () { try { CKobject.getObjectById('ckplayer_videobox').videoPause(); } catch (e) { } }); $(window).focus(function () { //CKobject.getObjectById('ckplayer_videobox').videoPlay(); //如果视频事件的弹窗存在,则不做其它动作。 if (MsgBox.IsExist) return; try { var id = $().getPara('olid'); CKobject.getObjectById('ckplayer_videobox').videoSeek(Number($().cookie("outlineVideo_" + id))); } catch (e) { } }); /* 获取观看的累计时间,单位:秒 */ var watchTime = Number($("#studyTime").attr("num")); watchTime = isNaN(watchTime) ? 0 : watchTime; //历史递交记录 var totalTime=Number($("#totalTime").text()); var p = Math.floor(watchTime / totalTime * 10000) / 100; var historyLog = isNaN(p)|| p==Number.POSITIVE_INFINITY ? 0 : p; //var setT = null; function pausedHandler(b) { //if (setT) window.clearInterval(setT); //if (!b) setT = window.setInterval(setIntervalFunction, 1000); } //获取视频总时长 function getTotal() { //获取视频时长 var dura = CKobject._K_('totalTime').innerHTML; if (Number(dura) < 1) { var a = CKobject.getObjectById('ckplayer_videobox').getStatus(); var total = ''; for (var k in a) { if (k == 'totalTime') total = a[k]; } CKobject._K_('totalTime').innerHTML = total; } return Number(dura); } function setIntervalFunction() { //设置学习时间数值显示 CKobject._K_('studyTime').innerHTML = Math.floor(watchTime); var total = getTotal(); //总时长 //提交数据 //完成度的百分比 var percent = Math.floor(Number($("#per").text())); var interval = 2; //间隔百分比多少递交一次记录 if (Number(total) <= 5 * 60) interval = 10; //5分钟内 else if (Number(total) <= 10 * 60) interval = 5; if (percent % interval == 0 && (percent > 0 && percent <= 100) && percent > Math.floor(historyLog)) { historyLog += interval; $.ajax({ url: "/Ajax/StudentStudy.ashx", data: { couid: couid, olid: olid, studyTime: watchTime, playTime: Number($("#playTime").text().trim()) * 1000, totalTime: Number($("#totalTime").text().trim()) * 1000 }, success: function (data) { var d = Number(data); var show = $(".StudentStudyLog"); if (d > 0) show.text("学习进度(" + d + "%)提交成功!").removeClass("error"); if (d == -1) show.text("学员未登录,或登录失效").addClass("error"); show.show(1000, function () { window.setTimeout(function () { $(".StudentStudyLog").hide(500); }, 3000); }); }, error: function (e) { var ex=e.responseText; $(".StudentStudyLog").text("学习进度保存失败! 稍后会再次提交..").addClass("error").show(1000, function () { window.setTimeout(function () { $(".StudentStudyLog").hide(500); }, 5000); }); } }); } } function timeHandler(t) { //播放进度 if (t > -1) { var history = Number($.trim($("#playTime").text())); var time = Math.floor(t); if (history != time) { $("#playTime").text(time); activeEvent(time); //触发播放事件 watchTime++; //观看时间加- //完成度的百分比 var p = Math.floor(watchTime / Number($("#totalTime").text()) * 10000) / 100; $("#per").text(p); setIntervalFunction(); //向服务器提交学习记录 //记录本地播放进度 var id = $().getPara('id'); $().cookie("outlineVideo_" + id, time); } } } //加载视频播放器 var flashvars = { f: videoPath, //视频地址 a: '', //调用时的参数,只有当s>0的时候有效 s: '0', //调用方式,0=普通方法(f=视频地址),1=网址形式,2=xml形式,3=swf形式(s>0时f=网址,配合a来完成对地址的组装) c: '0', //是否读取文本配置,0不是,1是 x: '', //调用配置文件路径,只有在c=1时使用。默认为空调用的是ckplayer.xml //i:'http://www.ckplayer.com/images/loadimg3.jpg',//初始图片地址 //d:'http://www.ckplayer.com/down/pause6.1_1.swf|http://www.ckplayer.com/down/pause6.1_2.swf',//暂停时播放的广告,swf/图片,多个用竖线隔开,图片要加链接地址,没有的时候留空就行 u: '', //暂停时如果是图片的话,加个链接地址 //l:'http://www.ckplayer.com/down/adv6.1_1.swf|http://www.ckplayer.com/down/adv6.1_2.swf',//前置广告,swf/图片/视频,多个用竖线隔开,图片和视频要加链接地址 r: '', //前置广告的链接地址,多个用竖线隔开,没有的留空 t: '10|10', //视频开始前播放swf/图片时的时间,多个用竖线隔开 y: '', //这里是使用网址形式调用广告地址时使用,前提是要设置l的值为空 z: 'down/buffer.swf', //缓冲广告,只能放一个,swf格式 e: '0', //视频结束后的动作,0是调用js函数,1是循环播放,2是暂停播放并且不调用广告,3是调用视频推荐列表的插件,4是清除视频流并调用js功能和1差不多,5是暂停播放并且调用暂停广告 v: '80', //默认音量,0-100之间 p: '1', //视频默认0是暂停,1是播放,2是不加载视频 h: '0', //播放http视频流时采用何种拖动方法,=0不使用任意拖动,=1是使用按关键帧,=2是按时间点,=3是自动判断按什么(如果视频格式是.mp4就按关键帧,.flv就按关键时间),=4也是自动判断(只要包含字符mp4就按mp4来,只要包含字符flv就按flv来) q: '', //视频流拖动时参考函数,默认是start m: '', //让该参数为一个链接地址时,单击播放器将跳转到该地址 o: '', //当p=2时,可以设置视频的时间,单位,秒 w: '', //当p=2时,可以设置视频的总字节数 g: '', //视频直接g秒开始播放 j: '', //跳过片尾功能,j>0则从播放多少时间后跳到结束,<0则总总时间-该值的绝对值时跳到结束 //k:'30|60',//提示点时间,如 30|60鼠标经过进度栏30秒,60秒会提示n指定的相应的文字 //n:'这是提示点的功能,如果不需要删除k和n的值|提示点测试60秒',//提示点文字,跟k配合使用,如 提示点1|提示点2 wh: '', //宽高比,可以自己定义视频的宽高或宽高比如:wh:'4:3',或wh:'1080:720' lv: '0', //是否是直播流,=1则锁定进度栏 loaded: 'loadedHandler', //当播放器加载完成后发送该js函数loaded //调用播放器的所有参数列表结束 //以下为自定义的播放器参数用来在插件里引用的 my_url: encodeURIComponent(window.location.href)//本页面地址 //调用自定义播放器参数结束 }; var params = { bgcolor: '#FFF', allowFullScreen: false, allowScriptAccess: 'always', wmode: 'transparent' }; //这里定义播放器的其它参数如背景色(跟flashvars中的b不同),是否支持全屏,是否支持交互 var video = [playMp4("undefined" != typeof videoPath ? videoPath : "") + '->video/mp4']; if ($("#videobox").size() > 0) { //CKobject.embed('/Utility/Ckplayer/ckplayer/ckplayer.swf', 'videobox', 'ckplayer_videobox', '100%', '100%', false, flashvars, video, params); CKobject.embedHTML5('videobox', 'ckplayer_videobox', '100%', '100%', video, flashvars, ['all']); } //播放flv格式的同名mp4视频 function playMp4(vname) { var vfile = vname; if (!isOuter) { //如果是外部链接 //vname = window.BASE64.decoder(vname); if (vname.indexOf('.' > -1)) { var exist = vname.substring(vname.lastIndexOf('.') + 1); if (exist != "aspx") { vname = vname.substring(0, vname.lastIndexOf('.')); vfile = vname + ".mp4"; } } $("#loadvideo").attr("href", vfile); $("#loadvideo").attr("download", vfile); } else { $("#loadvideo").attr("href", vname); $("#loadvideo").attr("download", vname); } return vfile; } /* 以上代码演示的兼容flash和html5环境的。如果只调用flash播放器或只调用html5请看其它示例 */ //开关灯 var box = new LightBox(); function closelights() {//关灯 box.Show(); CKobject._K_('videobox').style.width = '440px'; CKobject._K_('videobox').style.height = '550px'; CKobject.getObjectById('ckplayer_videobox').width = 680; CKobject.getObjectById('ckplayer_videobox').height = 400; } function openlights() {//开灯 box.Close(); CKobject._K_('videobox').style.width = '680px'; CKobject._K_('videobox').style.height = '400px'; CKobject.getObjectById('ckplayer_videobox').width = 680; CKobject.getObjectById('ckplayer_videobox').height = 400; } function playerstop() { //只有当调用视频播放器时设置e=0或4时会有效果 //播放完成后自动跳转到下一节 var curr = $("div.itemList div.current"); var next = curr.next().next(); if (next.size() < 1) { next = curr.parent().next(".olitem"); } if (next.size() > 0) { var a = next.find("a"); if (a.size() > 0) { var href = a.attr("href"); window.location.href = href; } } } //跳转到历史学习点 $(function () { $(".historyInfo").click(function () { var history = $.trim($("#historyTime").text()); CKobject.getObjectById('ckplayer_videobox').videoSeek(history); }); }); /*=========================================================================================== 视频的播放事件 */ MsgBox.OverEvent = function () { CKobject.getObjectById('ckplayer_videobox').videoPlay(); }; //通过播放时间,激活视频事件 function activeEvent(time) { //实际播放的时间值,单位秒 var s = Math.floor(Number(time)); // $("#events .eventItem").each(function () { var point = Number($(this).attr("point")); if (point == s) { //暂停播放 CKobject.getObjectById('ckplayer_videobox').videoPause(); //激出弹出窗口 var tit = $(this).find(".eventTitle").html(); var width = Number($(this).attr("winWidth")); var height = Number($(this).attr("winHeight")); var contx = $(this).find(".eventContext").html(); var type = Number($(this).attr("type")); //如果是提醒或知识展示 if (type == 1 || type == 2) { new MsgBox(tit, contx, width, height, "alert").Open(); } //如果是试题 if (type == 3) { new MsgBox(tit, $(this).html(), width, height, "null").Open(); $(".MsgBoxContext .eventTitle").remove(); $(".MsgBoxContext .quesBox .ansItem").click(function () { if ($(this).attr("iscorrect") == "True") { var quesAnd = $(".MsgBoxContext .quesAns"); quesAnd.hide(); quesAnd.html("√ 回答正确!"); quesAnd.css("color", "green"); quesAnd.show(100); setTimeout("MsgBox.Close()", 1000); } else { var quesAnd = $(".MsgBoxContext .quesAns"); quesAnd.hide(); quesAnd.html("× 回答错误!"); quesAnd.css("color", "red"); quesAnd.show(100); } }); } //如果是实时反馈 if (type == 4) { new MsgBox(tit, $(this).html(), width, height, "null").Open(); $(".MsgBoxContext .eventTitle").remove(); $(".MsgBoxContext .quesBox .ansItem").click(function () { var playPoint = Number($(this).attr("point")); CKobject.getObjectById('ckplayer_videobox').videoSeek(playPoint); MsgBox.Close(true); }); } } }); }