562 lines
24 KiB
JavaScript
562 lines
24 KiB
JavaScript
var couid = $api.querystring("couid");
|
||
var vdata = new Vue({
|
||
data: {
|
||
//数据实体
|
||
account: {}, //当前账号信息
|
||
course: {}, //当前课程
|
||
outline: {}, //当前课程章节
|
||
subject: {}, //当前专业
|
||
outlines: [], //当前课程的章节列表（树形）
|
||
access: [], //附件列表
|
||
events: [], //视频事件
|
||
messages: [], //咨询留言
|
||
//当前章节的视频信息
|
||
video: {
|
||
url: '', //视频路径
|
||
total: 0, //总时长
|
||
playTime: 0, //当前播放时间，单位：毫秒
|
||
playhistime: 0, //历史播放时间
|
||
studytime: 0, //累计学习时间
|
||
percent: 0 //完成度（百分比）
|
||
},
|
||
playtime: 0, //当前播放时间，单位：秒
|
||
playpercent: 0, //当前播放完成度百分比
|
||
//状态
|
||
state: {}, //课程状态
|
||
couid: $api.querystring("couid"),
|
||
olid: $api.querystring("olid"),
|
||
median: false, //分隔线折叠状态
|
||
titState: 'loading', //左侧选项卡的状态
|
||
rightState: 'outline', //右侧选项卡状态，章节outline,交流chat
|
||
outlineLoaded: false, //右侧章节列表加载中
|
||
studylogUpdate: false, //学习记录是否在递交中
|
||
studylogState: 0, //学习记录提交状态，1为成功，-1为失败
|
||
switchSubtitle: $api.cookie("switchSubtitle_" + $api.querystring("couid")) == "true" ? true : false, //弹幕开关
|
||
//控件
|
||
player: null //播放器
|
||
},
|
||
watch: {
|
||
//课程状态
|
||
state: function (val) {
|
||
if (vdata.state.isNull) vdata.titState = 'isNull';
|
||
if (vdata.state.isAccess) vdata.titState = 'isAccess';
|
||
if (vdata.state.isQues) vdata.titState = 'isQues';
|
||
if (vdata.state.isContext) vdata.titState = 'isContext';
|
||
if (vdata.state.isLive) vdata.titState = 'isLive';
|
||
if (vdata.state.existVideo) vdata.titState = 'existVideo';
|
||
//if (!vdata.state.canStudy) vdata.titState = 'isNull';
|
||
if (vdata.state.DeskAllow) return;
|
||
//视频播放
|
||
if (vdata.state.canStudy && (vdata.state.existVideo || vdata.state.isLive))
|
||
vdata.videoPlay(vdata.state);
|
||
},
|
||
//左侧选项卡切换
|
||
titState: function (val) {
|
||
if (vdata.playready()) {
|
||
vdata.titState == 'existVideo' ? vdata.player.play() : vdata.player.pause();
|
||
}
|
||
},
|
||
//弹幕开关
|
||
'switchSubtitle': function (val, old) {
|
||
if (val != old)
|
||
$api.cookie("switchSubtitle_" + vdata.couid, val);
|
||
},
|
||
//播放进度时间变化
|
||
playtime: function (val) {
|
||
vdata.video.studytime++;
|
||
//当前视频播放进度百分比
|
||
var per = Math.floor(vdata.video.studytime <= 0 ? 0 : vdata.video.studytime / vdata.video.total * 100);
|
||
vdata.playpercent = per;
|
||
//触发视频事件
|
||
vdata.videoEvent(vdata.playtime);
|
||
},
|
||
//播放进度百分比变化，
|
||
playpercent: function (val, oldval) {
|
||
//console.log('当前播放进度百分比：'+val);
|
||
//学习记录提交
|
||
if (val <= 100) vdata.videoLog(val);
|
||
}
|
||
},
|
||
methods: {
|
||
//知识库的点击事件
|
||
knlClick: function () {
|
||
new top.PageBox('课程知识库', 'Knowledges.ashx?couid=' + vdata.couid, 100, 100, null, window.name).Open();
|
||
},
|
||
//章节列表的点击事件
|
||
outlineClick: function (olid, event) {
|
||
var url = $api.setpara("olid", olid);
|
||
history.pushState({}, null, url);
|
||
vdata.olid = olid;
|
||
vdata.titState = 'loading';
|
||
if (event != null) event.preventDefault();
|
||
//获取当前章节状态，和专业信息
|
||
$api.bat(
|
||
$api.get("Outline/ForID", {
|
||
id: olid
|
||
}),
|
||
$api.get("Outline/state", {
|
||
olid: olid
|
||
})
|
||
).then(axios.spread(function (ol, state) {
|
||
if (ol.data.success && state.data.success) {
|
||
vdata.outline = ol.data.result;
|
||
vdata.state = state.data.result;
|
||
if (!vdata.state.isLive && vdata.state.PlayTime / 1000 > 0) {
|
||
/*
|
||
vdata.$confirm('是否从上次进度播放？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(function() {
|
||
vdata.videoSeek(vdata.state.PlayTime / 1000);
|
||
window.setTimeout(function() {
|
||
if (vdata.playready()) vdata.player.play();
|
||
}, 500);
|
||
}).catch(function() {
|
||
|
||
});*/
|
||
}
|
||
//视频播放记录
|
||
var result = state.data.result;
|
||
vdata.video.studytime = isNaN(result.StudyTime) ? 0 : result.StudyTime;
|
||
vdata.video.playhistime = isNaN(result.PlayTime) ? 0 : result.PlayTime / 1000;
|
||
window.setTimeout(function () {
|
||
vdata.outlineLoaded = true;
|
||
}, 100);
|
||
|
||
//获取视频事件
|
||
if (state.data.result.existVideo && vdata.outline) {
|
||
$api.get("Outline/VideoEvents", {
|
||
olid: vdata.outline.Ol_ID
|
||
}).then(function (req) {
|
||
if (req.data.success) {
|
||
vdata.events = req.data.result;
|
||
} else {
|
||
alert("视频事件加载失败！详情：\r" + req.data.message);
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
if (!ol.data.success) alert("章节信息加载异常！详情：\r" + ol.data.message);
|
||
if (!state.data.success) alert("章节状态加载异常！详情：\r" + state.data.message);
|
||
}
|
||
}));
|
||
//获取留言列表
|
||
vdata.msgGet();
|
||
},
|
||
//播放器是否准备好
|
||
playready: function () {
|
||
if (vdata.player != null) {
|
||
return vdata.player._isReady && vdata.player.engine;
|
||
}
|
||
return false;
|
||
},
|
||
//视频开始播放
|
||
videoPlay: function (state) {
|
||
if (vdata.player != null) {
|
||
vdata.player.destroy();
|
||
vdata.player = null;
|
||
}
|
||
if (!vdata.state.isLive) { //点播
|
||
vdata.player = new QPlayer({
|
||
url: state.urlVideo,
|
||
container: document.getElementById("videoplayer"),
|
||
autoplay: true,
|
||
});
|
||
} else { //直播
|
||
vdata.player = new QPlayer({
|
||
url: state.urlVideo,
|
||
container: document.getElementById("livebox"),
|
||
isLive: true,
|
||
autoplay: true
|
||
});
|
||
}
|
||
if (vdata.player != null) {
|
||
vdata.player.on("loading", vdata.videoready);
|
||
vdata.player.on("ready", vdata.videoready);
|
||
vdata.player.on("timeupdate", function (currentTime, totalTime) {
|
||
vdata.video.total = parseInt(totalTime);
|
||
vdata.video.playTime = currentTime; //详细时间，精确到毫秒
|
||
vdata.playtime = parseInt(currentTime);
|
||
//学习完成度，最大为百分百
|
||
vdata.video.percent = Math.floor(vdata.video.studytime <= 0 ? 0 : vdata.video.studytime / vdata.video.total * 1000) / 10;
|
||
vdata.video.percent = vdata.video.percent > 100 ? 100 : vdata.video.percent;
|
||
});
|
||
vdata.player.on("seeked", function () {
|
||
vdata.playtime = vdata.playready() ? vdata.player.currentTime : 0;
|
||
window.setTimeout(function () {
|
||
if (vdata.playready()) vdata.player.pause();
|
||
}, 50);
|
||
});
|
||
vdata.player.on("play", function (e) {
|
||
if (window.videoFixed) vdata.player.pause();
|
||
});
|
||
}
|
||
},
|
||
//播放器加载后的事件
|
||
videoready: function () {
|
||
//隐藏全屏按钮
|
||
var fullbtn = document.getElementsByClassName("qplayer-fullscreen");
|
||
for (var i = 0; i < fullbtn.length; i++) {
|
||
fullbtn[i].style.display = "none";
|
||
}
|
||
//隐藏设置按钮(播放倍速也禁用了)
|
||
var setbtn = document.getElementsByClassName("qplayer-settings-btn");
|
||
for (var i = 0; i < setbtn.length; i++) {
|
||
//setbtn[i].style.display = "none";
|
||
}
|
||
//给video对象增加属性
|
||
var video = document.querySelector("video");
|
||
video.setAttribute("x5-playsinline", "");
|
||
video.setAttribute("playsinline", true);
|
||
video.setAttribute("webkit-playsinline", true);
|
||
video.setAttribute("x-webkit-airplay", true);
|
||
video.setAttribute("x5-video-player-type", "h5");
|
||
video.setAttribute("x5-video-player-fullscreen", "");
|
||
video.setAttribute("x5-video-orientation", "portraint");
|
||
},
|
||
//视频播放跳转
|
||
videoSeek: function (second) {
|
||
if (vdata.playready()) {
|
||
vdata.player.seek(second);
|
||
}
|
||
},
|
||
//学习记录记录
|
||
videoLog: function (per) {
|
||
if (vdata.studylogUpdate) return;
|
||
var interval = 1; //间隔百分比多少递交一次记录
|
||
if (vdata.video.total <= 5 * 60) interval = 10; //5分钟内的视频
|
||
else if (vdata.video.total <= 10 * 60) interval = 5; //10分钟的视频，5%递交一次
|
||
else if (vdata.video.total <= 30 * 60) interval = 2; //30分钟的视频，2%递交一次
|
||
if (per > 0 && per < (100 + interval) && per % interval == 0) {
|
||
if (!vdata.outline) return;
|
||
$api.post("Course/StudyLog", {
|
||
couid: vdata.course.Cou_ID,
|
||
olid: vdata.outline.Ol_ID,
|
||
playTime: vdata.playtime,
|
||
studyTime: vdata.video.studytime,
|
||
totalTime: vdata.video.total
|
||
}, function () {
|
||
vdata.studylogUpdate = true;
|
||
}, function () {
|
||
vdata.studylogUpdate = false;
|
||
}).then(function (req) {
|
||
if (!req.data.success) {
|
||
if (vdata.playready()) {
|
||
vdata.player.pause();
|
||
vdata.player.destroy();
|
||
vdata.player = null;
|
||
}
|
||
alert(req.data.message);
|
||
return;
|
||
}
|
||
vdata.studylogState = 1;
|
||
window.setTimeout(function () {
|
||
vdata.studylogState = 0;
|
||
}, 2000);
|
||
}).catch(function (err) {
|
||
vdata.studylogState = -1;
|
||
//alert(err);
|
||
window.setTimeout(function () {
|
||
vdata.studylogState = 0;
|
||
}, 2000);
|
||
});
|
||
}
|
||
},
|
||
//视频事件的触发
|
||
videoEvent: function (playtime) {
|
||
if (vdata.events.length < 1) return;
|
||
var curr = null;
|
||
for (var ev in vdata.events) {
|
||
if (vdata.events[ev].Oe_TriggerPoint == playtime) {
|
||
curr = vdata.events[ev];
|
||
break;
|
||
}
|
||
}
|
||
if (curr == null) return;
|
||
//视频暂停
|
||
if (vdata.playready()) vdata.player.pause();
|
||
var box = new MsgBox();
|
||
box.OverEvent = function () {
|
||
if (vdata.playready()) vdata.player.play();
|
||
}
|
||
if (curr.Oe_EventType == 1)
|
||
box.Init("提示：" + curr.Oe_Title, curr.Oe_Context, curr.Oe_Width, curr.Oe_Height, "alert").Open();
|
||
if (curr.Oe_EventType == 2)
|
||
box.Init("知识点：" + curr.Oe_Title, curr.Oe_Context, curr.Oe_Width, curr.Oe_Height, "alert").Open();
|
||
if (curr.Oe_EventType == 3) {
|
||
var items = eval(curr.Oe_Datatable);
|
||
var context = curr.Oe_Context + "<div class='quesBox'>";
|
||
for (var i in items) {
|
||
if (items[i].item == "") continue;
|
||
context += "<div onclick='vdata.videoEventClick(" + items[i].iscorrect + ",-1)'>" +
|
||
(Number(i) + 1) + "、" + items[i].item + "</div>";
|
||
}
|
||
context += "</div>";
|
||
context += "<div id='event_error'>回答错误</div>";
|
||
box.Init("提问" + curr.Oe_Title, context, curr.Oe_Width, curr.Oe_Height, "null").Open();
|
||
}
|
||
if (curr.Oe_EventType == 4) {
|
||
var items = eval(curr.Oe_Datatable);
|
||
var context = curr.Oe_Context + "<div class='quesBox'>";
|
||
for (var i in items) {
|
||
if (items[i].item == "") continue;
|
||
context += "<div onclick='vdata.videoEventClick(null," + items[i].point + ")'>" +
|
||
(Number(i) + 1) + "、" + items[i].item + " - （跳转到：" + items[i].point + "秒）</div>";
|
||
}
|
||
context += "</div>";
|
||
box.Init("反馈：" + curr.Oe_Title, context, curr.Oe_Width, curr.Oe_Height, "alert").Open();
|
||
}
|
||
},
|
||
//视频事件的点击操作
|
||
videoEventClick: function (iscorrect, seek) {
|
||
//视频事件的问题
|
||
if (iscorrect != null) {
|
||
if (iscorrect) MsgBox.Close();
|
||
if (!iscorrect) {
|
||
var err = document.getElementById("event_error");
|
||
err.style.height = 20 + 'px';
|
||
err.style.opacity = 1;
|
||
window.setTimeout(function () {
|
||
var err = document.getElementById("event_error");
|
||
err.style.height = 0 + 'px';
|
||
err.style.opacity = 0;
|
||
}, 1000);
|
||
}
|
||
}
|
||
//视频跳转
|
||
if (iscorrect == null && seek > 0) {
|
||
if (!vdata.playready()) return;
|
||
vdata.player.seek(seek);
|
||
MsgBox.Close();
|
||
}
|
||
},
|
||
//发送消息
|
||
msgSend: function () {
|
||
var msg = document.getElementById("messageinput").value;
|
||
if ($api.trim(msg) == '') return;
|
||
var span = Date.now() - Number($api.cookie("msgtime"));
|
||
if (span / 1000 < 10) {
|
||
vdata.$notify({
|
||
message: '不要频繁发消息！',
|
||
position: 'bottom-right'
|
||
});
|
||
return;
|
||
}
|
||
$api.cookie("msgtime", Date.now());
|
||
$api.post("message/add", {
|
||
acc: '',
|
||
msg: msg,
|
||
playtime: vdata.playtime,
|
||
couid: vdata.couid,
|
||
olid: vdata.olid
|
||
}).then(function (req) {
|
||
var d = req.data;
|
||
if (d.success) {
|
||
document.getElementById("messageinput").value = '';
|
||
vdata.msgGet();
|
||
} else {
|
||
alert("信息添加发生异常！详情：\r" + d.message);
|
||
}
|
||
});
|
||
},
|
||
//获取当前章节的留言信息
|
||
msgGet: function () {
|
||
if (!vdata.olid || vdata.olid < 1) return;
|
||
$api.post("message/count", {
|
||
olid: vdata.olid,
|
||
order: 'asc',
|
||
count: 100
|
||
}).then(function (req) {
|
||
var d = req.data;
|
||
if (d.success) {
|
||
vdata.messages = d.result;
|
||
window.setTimeout(function () {
|
||
var dl = document.getElementById("chatlistdl");
|
||
document.getElementById("chatlist").scrollTop = dl.offsetHeight;
|
||
}, 1000);
|
||
} else {
|
||
alert("留言信息加载异常！详情：\r" + d.message);
|
||
}
|
||
}).catch(function (err) {
|
||
//alert("msgGet方法存在错误："+err);
|
||
});
|
||
},
|
||
init: function () {
|
||
|
||
}
|
||
},
|
||
created: function () {
|
||
var couid = $api.querystring("couid");
|
||
$api.bat(
|
||
$api.get("Outline/tree", {
|
||
couid: couid
|
||
}),
|
||
$api.get("Course/ForID", {
|
||
id: couid
|
||
})).then(axios.spread(function (ol, cur) {
|
||
if (ol.data.success && cur.data.success) {
|
||
if (ol.data.result.length < 1) throw "没有课程章节";
|
||
vdata.outlines = ol.data.result;
|
||
if (vdata.olid == '') vdata.olid = ol.data.result[0].Ol_ID;
|
||
vdata.outlineClick(vdata.olid, null);
|
||
vdata.course = cur.data.result;
|
||
document.title = vdata.course.Cou_Name;
|
||
$api.get("Subject/ForID", {
|
||
id: vdata.course.Sbj_ID
|
||
}).then(function (subject) {
|
||
if (subject.data.success) {
|
||
vdata.subject = subject.data.result;
|
||
} else {
|
||
if (!subject.data.success) throw "课程所属专业加载异常！详情：\r" + subject.data.message;
|
||
}
|
||
}).catch(function (err) {
|
||
alert(err);
|
||
});
|
||
vdata.msgGet();
|
||
} else {
|
||
if (!ol.data.success) throw "章节列表加载异常！详情：\r" + ol.data.message;
|
||
if (!cur.data.success) throw "课程信息加载异常！详情：\r" + cur.data.message;
|
||
}
|
||
})).catch(function (err) {
|
||
alert(err);
|
||
});
|
||
//当前登录学员
|
||
$api.get("Account/Current", {}, null, null).then(function (req) {
|
||
if (req.data.success) {
|
||
vdata.account = req.data.result;
|
||
}
|
||
});
|
||
//定时刷新（加载）咨询留言
|
||
window.setInterval('vdata.msgGet()', 1000 * 10);
|
||
},
|
||
mounted: function () {
|
||
//视频上面的漂浮信息（学员姓名和电话），防录屏
|
||
window.setInterval(function () {
|
||
var acc = document.getElementById("accinfo");
|
||
if (acc == null) return;
|
||
if (acc.parentNode.offsetHeight == 0 || acc.parentNode.offsetWidth == 0) return;
|
||
//移动速度
|
||
window.acctop = window.acctop ? window.acctop : Math.ceil(Math.random() * 100) / 10;
|
||
window.accleft = window.accleft ? window.accleft : Math.ceil(Math.random() * 100) / 10;
|
||
//获取当前坐标
|
||
var top = Number(acc.style.top.replace('px', ''));
|
||
var left = Number(acc.style.left.replace('px', ''));
|
||
//转向
|
||
if (top < 0 || top > acc.parentNode.offsetHeight - acc.offsetHeight) window.acctop = -window.acctop;
|
||
if (left < 0 || left > acc.parentNode.offsetWidth - acc.offsetWidth) window.accleft = -window.accleft;
|
||
//移动
|
||
acc.style.top = (top < 0 ? 0 : (top > acc.parentNode.offsetHeight - acc.offsetHeight ? acc.parentNode.offsetHeight - acc.offsetHeight : top + window.acctop)) + "px";
|
||
acc.style.left = (left < 0 ? 0 : (left > acc.parentNode.offsetWidth - acc.offsetWidth ? acc.parentNode.offsetWidth - acc.offsetWidth : left + window.accleft)) + "px";
|
||
|
||
}, 200);
|
||
|
||
},
|
||
|
||
});
|
||
vdata.$mount('#body');
|
||
window.onload = function () {
|
||
this.vdata.init();
|
||
}
|
||
|
||
window.onblur = function () {
|
||
if (vdata.playready()) {
|
||
//if (vdata.state.isLive || vdata.state.existVideo)
|
||
if (!vdata.state.SwitchPlay)
|
||
vdata.player.pause();
|
||
}
|
||
}
|
||
window.onfocus = function () {
|
||
//如果有视频事件弹出，则窗体获取焦点时，视频并不播放
|
||
if ($("div[type=MsgBox]").size() > 0) return;
|
||
if (vdata.playready()) {
|
||
//vdata.titState == 'existVideo' && vdata.state.isLive ? vdata.player.play() : vdata.player.pause();
|
||
//只有当处于视频状态时才播放
|
||
if (vdata.titState == 'existVideo' || vdata.titState == 'isLive')
|
||
vdata.player.play();
|
||
}
|
||
}
|
||
|
||
window.onresize = function () {
|
||
window.setTimeout(function () {
|
||
var str = '';
|
||
[22, 9, 4, 5, 15].forEach(x => str += String.fromCharCode(0x60 + x));
|
||
var v = document.querySelector(str);
|
||
if (!v) return;
|
||
var styles = document.defaultView.getComputedStyle(v.parentNode, null);
|
||
var posi = styles.getPropertyValue('position');
|
||
window.videoFixed = posi == 'fixed';
|
||
v.style.display = window.videoFixed ? 'none' : '';
|
||
!window.videoFixed && $("div[type=MsgBox]").size() < 1 ? v.play() : v.pause();
|
||
}, 100);
|
||
}
|
||
|
||
//全局过滤器，日期格式化
|
||
Vue.filter('date', function (value, fmt) {
|
||
if ($api.getType(value) != 'Date') return value;
|
||
var o = {
|
||
"M+": value.getMonth() + 1,
|
||
"d+": value.getDate(),
|
||
"h+": value.getHours(),
|
||
"m+": value.getMinutes(),
|
||
"s+": value.getSeconds()
|
||
};
|
||
if (/(y+)/.test(fmt))
|
||
fmt = fmt.replace(RegExp.$1, (value.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||
for (var k in o)
|
||
if (new RegExp("(" + k + ")").test(fmt))
|
||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||
return fmt;
|
||
});
|
||
|
||
//******* 附件列表
|
||
Vue.component('accessory', {
|
||
props: ['uid', 'isbuy'],
|
||
data: function () {
|
||
return {
|
||
datas: [], //附件列表
|
||
msg: '' //提示信息
|
||
}
|
||
},
|
||
watch: {
|
||
'uid': function (val, old) {
|
||
var th = this;
|
||
th.msg = '';
|
||
$api.get("Outline/Accessory", { uid: val }).then(function (acc) {
|
||
if (acc.data.success) {
|
||
th.datas = acc.data.result;
|
||
} else {
|
||
th.msg = "附件信息加载异常！详情：\r" + acc.data.message;
|
||
}
|
||
}).catch(function (err) {
|
||
th.msg = err;
|
||
});
|
||
},
|
||
'isbuy': function (val, old) {
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
//附件的点击事件
|
||
accessClick: function (file, tit, event) {
|
||
var exist = file.substring(file.lastIndexOf(".") + 1).toLowerCase();
|
||
if (exist == "pdf") {
|
||
event.preventDefault();
|
||
var box = new PageBox(tit, $api.pdfViewer(file), 100, 100, null, window.name);
|
||
box.Open();
|
||
}
|
||
return false;
|
||
}
|
||
},
|
||
template: '<div id="accessory">\
|
||
<div v-if="!isbuy" style="color:red;">课程未购买，资料不提供下载或预览</div>\
|
||
<a v-if="isbuy" v-for="(item,index) in datas" target="_blank":href="item.As_FileName"\
|
||
v-on:click="accessClick(item.As_FileName,item.As_Name,$event)"\
|
||
:download="item.As_Name">{{index+1}}、{{item.As_Name}}\
|
||
</a>\
|
||
<div v-if="!isbuy" v-for="(item,index) in datas" >\
|
||
{{index+1}}、{{item.As_Name}}\
|
||
</div>\
|
||
<div class="noInfo">{{msg}}</div>\
|
||
</div>'
|
||
}); |