220 lines
7.7 KiB
JavaScript
220 lines
7.7 KiB
JavaScript
(function (win) {
|
|
// 初始化样式和方法
|
|
initClass();
|
|
})(window);
|
|
|
|
// classId 通过课程id拿配置信息
|
|
function getClassInfo(classId) {
|
|
if (
|
|
window &&
|
|
window.GLOBAL_CONFIG &&
|
|
window.GLOBAL_CONFIG.classObject
|
|
) {
|
|
// 从路由获取当前课程信息 courseHome.html?id=l01
|
|
const id = classId || window.location.search.replace("?id=", "") || "m2x04";
|
|
const type = {
|
|
l: "live",
|
|
c: "language",
|
|
m: "math",
|
|
};
|
|
let classInfo = window.GLOBAL_CONFIG.classObject[type[id[0]]][id]
|
|
// console.log("从路由获取当前课程信息 id classInfo", id, id[0], classInfo);
|
|
// 课程信息
|
|
return classInfo;
|
|
}
|
|
}
|
|
|
|
// 初始化课程
|
|
function initClass() {
|
|
let classInfo = getClassInfo();
|
|
|
|
if (classInfo && classInfo.courseVideo && classInfo.courseVideo.src) {
|
|
let mainVideoDom = document.getElementById("mainVideo");
|
|
mainVideoDom.src = classInfo.courseVideo.src;
|
|
mainVideoDom.dataset.id = classInfo.courseVideo.id;
|
|
mainVideoDom.load();
|
|
mainVideoDom.play();
|
|
|
|
// 开始跟踪课程访问
|
|
const courseId = window.location.search.replace("?id=", "") || "m2x04";
|
|
if (window.trackCourseAccess) {
|
|
window.trackCourseAccess(courseId);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 点击目录选择课程
|
|
function sectionClick(event) {
|
|
if (
|
|
event &&
|
|
event.target &&
|
|
event.target.dataset &&
|
|
event.target.dataset.info
|
|
) {
|
|
stopVideo();
|
|
const info = JSON.parse(event.target.dataset.info);
|
|
// console.log("sectionClick", event, info);
|
|
|
|
if (info.classId !== window.location.search.replace("?id=", "")) {
|
|
window.open(`./courseHome.html?id=${info.classId}`, "_self");
|
|
}
|
|
let classInfo = getClassInfo();
|
|
let mainPlayDom = document.getElementsByClassName("box-play")[0];
|
|
|
|
// 主课程
|
|
if (info.type == "course") {
|
|
mainPlayDom.style.display = "none";
|
|
let mainVideoDom = document.getElementById("mainVideo");
|
|
mainVideoDom.src = classInfo.courseVideo.src;
|
|
mainVideoDom.dataset.id = classInfo.courseVideo.id;
|
|
mainVideoDom.load();
|
|
mainVideoDom.play();
|
|
|
|
// 开始跟踪课程访问
|
|
if (window.trackCourseAccess) {
|
|
window.trackCourseAccess(info.classId);
|
|
}
|
|
} else if (info.type == "video") {
|
|
mainPlayDom.style.display = "none";
|
|
let vid = info.videosId;
|
|
let mainVideoDom = document.getElementById("mainVideo");
|
|
mainVideoDom.src = classInfo.task.videos[vid].src;
|
|
mainVideoDom.dataset.id = classInfo.task.videos[vid].id;
|
|
mainVideoDom.load();
|
|
mainVideoDom.play();
|
|
|
|
// 开始跟踪视频访问
|
|
if (window.trackVideoAccess) {
|
|
window.trackVideoAccess(info.classId, vid);
|
|
}
|
|
|
|
// 设置监听函数
|
|
mainVideoDom.addEventListener("ended", () => {
|
|
logicManage(mainVideoDom)
|
|
});
|
|
} else if (info.type == "play") {
|
|
mainPlayDom.style.display = "block";
|
|
let mainPlay = document.getElementById("mainPlay");
|
|
mainPlay.src = info.url;
|
|
|
|
// 开始跟踪游戏访问
|
|
if (window.trackGameAccess) {
|
|
window.trackGameAccess(info.classId);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 通知播放视频
|
|
function stopVideo() {
|
|
let mainVideoDom = document.getElementById("mainVideo");
|
|
mainVideoDom.pause();
|
|
|
|
// 控制按钮展示
|
|
const buttonDom = document.getElementsByClassName('box-btn')[0];
|
|
buttonDom.style.display = 'none';
|
|
|
|
let certificateDom = document.querySelector('.box-certificate');
|
|
certificateDom.style.display = "none";
|
|
|
|
// 结束访问跟踪
|
|
if (window.endAccess) {
|
|
window.endAccess();
|
|
}
|
|
}
|
|
|
|
// 视频播放结束、按钮点击后都调用此方法
|
|
function logicManage(event) {
|
|
// 获取区分dom 和 对象
|
|
let dom = null;
|
|
if (event.dataset) {
|
|
dom = event;
|
|
} else if (event.target) {
|
|
dom = event.target;
|
|
}
|
|
|
|
// console.log("logicManage", event, event.dataset, event.target, dom.dataset);
|
|
|
|
let classInfo = getClassInfo();
|
|
// 触发事件的是视频
|
|
if (dom.dataset.id.indexOf("v") == 0) {
|
|
// 找到当前视频id
|
|
let videoInfo = classInfo.task.videos[dom.dataset.id];
|
|
let nextId = videoInfo.nextId;
|
|
|
|
if (nextId && nextId.indexOf("b") == 0) {
|
|
// id包含b 下一步是显示按钮
|
|
const buttonInfo = classInfo.task.buttons[nextId];
|
|
const buttonDomList = document.getElementsByTagName('button');
|
|
|
|
buttonInfo.btn.map((value, index) => {
|
|
buttonDomList[index].innerText = value.text;
|
|
// 给dom自定义属于赋值
|
|
buttonDomList[index].dataset.id = value.id;
|
|
});
|
|
|
|
// 展示问题
|
|
const buttonTitleDom = document.getElementsByClassName('box-btn-question')[0];
|
|
buttonTitleDom.innerText = buttonInfo.question;
|
|
|
|
// 控制按钮展示
|
|
const buttonDom = document.getElementsByClassName('box-btn')[0];
|
|
buttonDom.style.display = 'flex';
|
|
}
|
|
else if (nextId && nextId.indexOf("n") == 0) {
|
|
let noticeDom = document.getElementsByClassName("box-notice")[0];
|
|
let noticeTextDom = document.getElementsByClassName("box-notice-text")[0];
|
|
|
|
noticeDom.style.display = 'block';
|
|
noticeDom.dataset.id = classInfo.task.notices[nextId].id;
|
|
|
|
noticeTextDom.innerText = classInfo.task.notices[nextId].text;
|
|
|
|
// 设置定时器 提示语只展示三秒，三秒后关闭，执行下一步
|
|
let timer = setTimeout(() => {
|
|
noticeDom.style.display = 'none';
|
|
// 清除定时器
|
|
clearTimeout(timer);
|
|
}, 3000);
|
|
|
|
}
|
|
else if (nextId && nextId.indexOf("v") == 0) {
|
|
// id包含v 下一步是播放视频
|
|
let mainVideoDom = document.getElementById("mainVideo");
|
|
mainVideoDom.src = classInfo.task.videos[nextId].src;
|
|
// 给dom自定义属于赋值
|
|
mainVideoDom.dataset.id = classInfo.task.videos[nextId].id;
|
|
mainVideoDom.load();
|
|
mainVideoDom.play();
|
|
}
|
|
}
|
|
// 触发事件的是按钮
|
|
else if (dom.dataset.id.indexOf("b") == 0) {
|
|
// 首先得切割id 知道是点击左边 还是右边的
|
|
let buttonId = dom.dataset.id.split("-")[0];
|
|
let buttonLorR = dom.dataset.id.split("-")[1];
|
|
let buttonInfo = classInfo.task.buttons[buttonId];
|
|
|
|
let nextId = null;
|
|
// 循环判断，看看点击的是左边还是右边的按钮
|
|
buttonInfo.btn.map((value, index) => {
|
|
if (value.id == dom.dataset.id) {
|
|
nextId = value.nextId;
|
|
}
|
|
});
|
|
console.log("点击的是左边还是右边的按钮 下一步", nextId);
|
|
if (nextId && nextId.indexOf("v") == 0) {
|
|
// id包含v 下一步是播放视频
|
|
let mainVideoDom = document.getElementById("mainVideo");
|
|
mainVideoDom.src = classInfo.task.videos[nextId].src;
|
|
// 给dom自定义属于赋值
|
|
mainVideoDom.dataset.id = classInfo.task.videos[nextId].id;
|
|
mainVideoDom.load();
|
|
mainVideoDom.play();
|
|
}
|
|
|
|
// 控制按钮展示
|
|
const buttonDom = document.getElementsByClassName('box-btn')[0];
|
|
buttonDom.style.display = 'none';
|
|
}
|
|
} |