define([
'jquery',
'underscore',
'backbone',
'dialogExtend',
'js/app/global/AppEvent-50f8a8fa06.js',
'js/app/views/video/question-2bcd254dba.js',
'text!tmpl/video/rest-0a2194cd3e.text',
'text!tmpl/video/stop-e47b59c660.text',
'pdfobject'
], function ($, _, Backbone, dialog, AppEvent, QuestionView, restHtml, stopHtml, PDFObject) {
var view = Backbone.View.extend({
el: ".video-wrapper",
//初始化方法，在创建对象时只执行一次
initialize: function () {
this.listenTo(AppEvent, 'updateProgress', function (data) {
this.updateProgressRender(data, data.vid);
});
this.listenTo(AppEvent, 'clickContinueStudy', function (data) {
//点击继续学习操作
dialog.close(this.clockdialog);
this.isClockDialog = 0;//标记位恢复
//人脸认证之后看是否需要录制视频
this.cloickContinuePlay(data.finish);
});
this.isFree = 0;
this.tjzjBizCode = "";
this.tjzjType = 0; //tjzjType == 0不是天津职教 1=天津职教
this.timeLimitClose = 0;//限时学习0=之前没有出来过，1-之前弹出过了，不需要再次弹出了
var $firstVideo = this.$("#video").children('div');
if(window.p.lessonId && window.p.lessonId!=""){
$(".video-title").each(function (e) {
var id = $(this).attr("data-lessonId");
if (window.p.lessonId == id) {
$(".video-title").removeClass("on");
$(this).addClass("on");
$firstVideo = $(this);
}
})
}
this.playingVideo = {};
var videoId = $firstVideo.attr("data-id");
var lessonId = $firstVideo.attr("data-lessonId");
var coursewareType = $firstVideo.data("type");
this.isFree = $firstVideo.data("isfree");
this.isClockDialog = 0;//标记位，0-还未弹出打卡弹窗1-已经弹出
this.doPointTimeArr = [];
this.isClicking = 0;//标记位，0-没有正在切换1-正在切换
// //初始化查找所有课件/文档
this._findAllVideos();
if (coursewareType == 1) {
var fileId = $firstVideo.attr("data-fileid");
var state = $firstVideo.data("trans");
this.loadDocument(fileId, state);
return;
}
if (videoId) {
var idx = 0;//当前播放视频的索引
this.initPlayer(lessonId,idx,0);
}
},
events: {
"click .video-title": "clickVideoHandler",
},
/**
* 查找所有视频课件
* @Return {[type]} [description]
*/
_findAllVideos: function () {
var videos = this.$(".video-title");
this.videos = videos;
},
//组装清晰度数据
packVideoQuality:function(videoObj){
var quiltys = [];
var urlsArr = videoObj['urls'];
if(urlsArr && urlsArr.length > 0){
if(videoObj.videoType == 1){
quiltys.push({name:"流畅",url:urlsArr[0].url+"?token="+videoObj.token});
}else{
_.each(urlsArr, function (item) {
switch(item.quality){
case "FLUENT":
quiltys.push({name:"流畅",url:item.url+"?token="+videoObj.token});
break;
case "SD":
quiltys.push({name:"标清",url:item.url+"?token="+videoObj.token});
break;
case "HD":
quiltys.push({name:"高清",url:item.url+"?token="+videoObj.token});
break;
case "FULL_HD":
quiltys.push({name:"超清",url:item.url+"?token="+videoObj.token});
break;
}
})
}
return quiltys;
}
},
//组装练习题弹出时间点
packPractiseTimes:function(videoObj){
var _this = this;
var practiseTimeArr = [];
var videoPractise = window.groupPractice.filter((el, index)=> {
return el.videoId == videoObj.videoId;
});
this.playingPractices = videoPractise;
if (!videoPractise || videoPractise.length == 0) return practiseTimeArr;
_.each(videoPractise, function (item) {
practiseTimeArr.push({time:item.alertTime,cb:function(cbObj){
_this.doPointTime.call(_this,cbObj);
}});
})
return practiseTimeArr;
},
//打点视频，节点回调方法
doPointTime:function(cbObj){
this._doOpenPractices(cbObj);
},
/**
* 判断是否全屏播放
*/
isFullscreen: function () {
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
},
/**
* 弹出练习题
* @return {[type]} [description]
*/
_doOpenPractices: function (cbObj) {
var _this = this;
if(this.playingPractices.length == 0){
return;
}
var theTimePracticies = _.filter(this.playingPractices, function (item) {
var alertTime = item.alertTime;
if (!alertTime || !item.videoId) return false;
if (parseInt(alertTime) == cbObj.time && item.videoId == this.playingVideo.videoId) {
return true;
}
return false;
}, this);
if (theTimePracticies.length == 0) return false;
//如果全屏播放，强制退出全屏
var isFullscreen = this.isFullscreen();
if (isFullscreen) {
this.xgplayer.exitFullscreen()
}
if (this.xgplayer) {
this.xgplayer.pause();
}
var sortOpenDialog = function () {
var practice = theTimePracticies.shift();
var questionView = new QuestionView({
model: practice
});
$("#modal").html(questionView.render().el);
layer.closeAll()
var d = dialog.open({
content: $("#modal"),
title: "",
closeBtn: 0,
area: "500px",
});
this.listenToOnce(questionView, 'ans-yes', function () {
dialog.close(d);
if (theTimePracticies.length == 0) {
if (this.xgplayer) {
this.xgplayer.play();
}
return;
}
sortOpenDialog.call(this);
});
}
sortOpenDialog.call(this);
return true;
},
//切换视频
clickVideoHandler: function (e) {
var target = $(e.currentTarget);
if(this.isClicking == 1){
return;
}
var coursewareType = target.data("type");
var lessonId = target.attr("data-lessonId");
var id = target.attr("data-id");
this.doPointTimeArr = [];
//音频文件增加参数 ：videoType = 0 视频 1= 音频
if (target.hasClass('on')) {
return;
}
this.isClicking = 1;
// if(vid){
this.$(".video-title.on").removeClass('on');
target.addClass('on');
if (coursewareType == 1) {
var fileId = target.attr("data-fileId");
var state = target.data("state");
//如果全屏播放，强制退出全屏
var isFullscreen = this.isFullscreen();
if (isFullscreen) {
this.xgplayer.exitFullscreen()
}
this.loadDocument(fileId, state);
return;
}
var idx = 0;
this.videos.each(function (index, el) {
var theId = $(this).attr("data-id");
if (id == theId) {
idx = index;
}
});
this.initPlayer(lessonId,idx,1);
},
//init 视频播放器 //音频文件增加参数 ：videoType = 0 视频 1= 音频videoPlaySource-0-初始化播放1-切换播放
initPlayer:function(lessonId,idx,videoPlaySource){
var _this = this;
var videoObj =_.findWhere(window.initlessons,{id:lessonId});
if(videoObj){
if (videoObj.transState != '2') {
//如果全屏播放，强制退出全屏
var isFullscreen = this.isFullscreen();
if (isFullscreen) {
this.xgplayer.exitFullscreen();
}
//转码中，强制销毁视频
if(this.xgplayer){
this.xgplayer.forceDestroy();
}
setTimeout(function(){
_this.xgplayer = null;
_this.$("#video-Player").html("<div style='width:100%;margin-top:40%;text-align:center;font-size:15px;color:#f99933'>视频正在转码中...</div>");
_this.isClicking = 0;
return false;
},200);
}
var qualitys = this.packVideoQuality(videoObj);
this.playingVideo = videoObj;
//练习题
var practiseTimeArr = this.packPractiseTimes(videoObj);
//视频打卡
var doClckInTimeArr = this._doClockIn();
//将联系题打点数组添加到打点数组
this.doPointTimeArr = this.doPointTimeArr.concat(practiseTimeArr).concat(doClckInTimeArr);
this.playingVideo['idx'] = idx;
var dragMaxTime =0;
if(window.timilistParam.isFastForward == 1){
dragMaxTime = this.playingVideo.studyProgress > 0?this.playingVideo.studyProgress:1;
}
var studyProgress = formatUtil.hhmmssOfVideo(this.playingVideo.studyProgress);
var volume = this.xgplayer?this.xgplayer.volume:0.5;
var defineVideoUrl = videoObj['urls']?videoObj['urls'][0].url+"?token="+videoObj.token:"";
var videos_count = this.videos.length;
//最后一个视频切换
if(idx+1 == videos_count){
var ignorArr = ["keyboard"];
}else{
var ignorArr = ["keyboard","replay"];
}
//视频开始播放时间
var lastPlayTime = this.playingVideo.progress < 1?this.playingVideo.studyProgress:0;
var options = {
id: "video-Player",
url: defineVideoUrl,
// width: "100%",
// height: "100%",
fluid: true,
volume: volume,
autoplay: true,
// 设置播放器视频起播时间
lastPlayTime: lastPlayTime, //视频起播时间（单位：秒）
lastPlayTimeHideDelay: 15, // 提示文字展示时长（单位：秒）
dragMaxTime:dragMaxTime,
definitionActive: 'click',
closeVideoClick:false,
//allowSeekPlayed: window.timilistParam.isFastForward == 1 && this.playingVideo.progress < 1?true:false,
videoBackground:{
isCustom: this.playingVideo.videoType == 1?true:false,
// background: 'url("<%=ctx%>/images/img-110-2bf69218a3.jpg"); center center/20% no-repeat, #000'
},
poster: videoObj['urls']?videoObj['urls'][0].imageUrl:"",
lastPlayTimeTips:"已学习到<span class='xgplayer-lasttime'>"+studyProgress+"</span>",
ignores: ignorArr,
//计时功能
countTime: {
interval: 60,
cb: function(cbObj){
_this.countTimeBack(cbObj) // 形参state，播放结束值为 end
}
},
//视频打点功能
dotList: this.doPointTimeArr,
onTimeUpdate: function(){
},
};
if(window.timilistParam.isFastForward == 1 && this.playingVideo.progress == 1){
delete options.dragMaxTime;
}
this.$("#video-Player").css("overflow", "hidden");
if(videoPlaySource == 0 || !this.xgplayer){
this.$("#video-Player").html("");
this.xgplayer = grtPlayer(options);
this.isClicking = 0;
if(qualitys && qualitys.length >1){
this.xgplayer.emit('resourceReady', qualitys);
}
this.registEventPlayer();
}else{
if(this.xgplayer && this.xgplayer.switchVideo){
this.xgplayer.switchVideo(options,function(player){
_this.xgplayer = player;
_this.isClicking = 0;
// _this.$("#video-Player").css("float", "left");
if(qualitys && qualitys.length > 1){
_this.xgplayer.emit('resourceReady', qualitys);
}
_this.registEventPlayer();
});
}
}
}
},
//注册播放器事件
registEventPlayer:function(){
var _this = this;
this.xgplayer.once('play',function(){
console.log("开始播放了====================");
// _this.recordCourseHitNum();
})
},
//计时回调
countTimeBack:function(cbObj){
var playProgress = 0;
if(cbObj){
playProgress = cbObj.time?cbObj.time:0;
}
if(this.isClockDialog == 0){
this._doSyncDuration.call(this,cbObj.end,playProgress);
}
},
/**
* 同步进度至服务器
* @return {[type]} [description]
*/
_doSyncDuration: function (finish,playProgress) {
var _this = this;
var chapterId = this.playingVideo.chapterId;
var videoId = this.playingVideo.videoId;
var configParams = window.timilistParam.clockInConfig || {};
$.ajax({
url: "/services/member/study/progress",
dataType: "json",
type: "post",
_removeLoading: true,
async: false,
headers: {
"u-platformId": window.platformInfo.id
},
data: {
courseId: window.courseId,
itemId: window.p.itemId,
videoId: videoId,
playProgress: playProgress,
segId: window.p.segId,
isFinish: finish,
type: window.p.type,
tjzj:1,
clockInDot:playProgress,//后台要求此参数为视频播放的位置
sourceId:window.p.projectId,
chapterId: chapterId,
clockInRule:configParams.clockInRule,
timeLimit:window.timilistParam.timeLimit||-1
},
success: function (res) {
if (res.success) {
var resInfo = res.data;
_this.updateProgressRender.call(_this,res.data, videoId);
if (resInfo && resInfo.id) {
if (_this.xgplayer) {
_this.xgplayer.pause();
}
//清楚定时器
clearInterval(_this.timer);
//弹出自动打卡弹窗，视频暂停
resInfo.clockInType = resInfo.clockinType;
// resInfo.thirdCourse = 0;//0-不是爱课程1-爱课程
resInfo.clockIn = 1;//0-随堂打卡1-随堂抽查
_this.clockInHandler.call(_this,resInfo, videoId, finish);
}else if(!resInfo.id && resInfo.validProgress == 1 && window.timilistParam.timeLimit > 0 && _this.timeLimitClose == 0){
//validProgress=1限制了学习时长弹出提示框
_this.timeLimitClose = 1;
_this.timeLimitHandler.call(_this,finish);
return false;
}else{
if (finish) {
_this.autoClickNext();
}
}
}
},
error: function (xhr) {
var resultCode = xhr.responseJSON.resultCode;
var message = "跟新进度失败";
if (resultCode == 3003) {
_this.manageTagHandler();
}
}
});
},
//多页签打开需求处理
manageTagHandler: function () {
//如果全屏播放，强制退出全屏
var isFullscreen = this.isFullscreen();
if (isFullscreen) {
this.xgplayer.exitFullscreen()
}
if (this.xgplayer) {
this.xgplayer.pause();
}
var d = dialog.open({
content: stopHtml,
title: "",
closeBtn: 0,
btn: ['关闭页面', '刷新页面，继续学习'],
area: ["550px", "350px"],
yes: function () {
dialog.close(d);
// window.opener = null;
// window.open("", "_self");
// window.close();
if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") != -1) {
window.location.href = "about:blank";
window.close();
} else {
window.opener = null;
window.open("", "_self");
window.close();
}
},
cancel: function () {
location.reload();
}
});
},
//自动切换到下一个视频
autoClickNext: function () {
var videos_count = this.videos.length;
var curIndex = this.playingVideo['idx'];
if (videos_count == 0 || curIndex == (videos_count - 1)) {
return;
}
var next = this.videos.eq(curIndex + 1);
next.trigger('click');
},
//跟新右侧进度
updateProgressRender: function (data, vid) {
var progress = parseFloat(data.progress);
progressPercent = parseInt(progress * 100);
if (progress != -1) {
var id = vid;
this.$(".catalog").find(".video-title[data-id='" + id + "']").attr('data-progress',progress);
this.$(".catalog").find(".video-title[data-id='" + id + "']").attr('data-studyProgress',data.videoProgress);
this.$(".catalog").find(".video-title[data-id='" + id + "']").children('.four').text(progressPercent + "%");
this.playingVideo.studyProgress = data.videoProgress;
}
},
//限制学时时长
timeLimitHandler: function (finish) {
var _this = this;
//如果全屏播放，强制退出全屏
var isFullscreen = this.isFullscreen();
if (isFullscreen) {
this.xgplayer.exitFullscreen();
}
if (this.xgplayer) {
this.xgplayer.pause();
}
var btnTxt = ['关闭页面']
if(window.timilistParam.timeLimitType == 1){
btnTxt = ['关闭页面', '继续学习，今日不再提示']
}
require(["js/app/views/video/dialog/timeLimit-45d69d2c81.js"], function (TimeLimit) {
var timeLimit = new TimeLimit();
$("#modal").html(timeLimit.render().el);
var d = dialog.open({
title: false,
closeBtn: 0,
content: $("#modal"),
area: ["550px", "350px"],
btn: btnTxt,
yes: function () {
dialog.close(d);
if (navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") != -1) {
window.location.href = "about:blank";
window.close();
} else {
window.opener = null;
window.open("", "_self");
window.close();
}
},
cancel: function () {
dialog.close(d);
if (finish) {
_this.autoClickNext();
}else{
_this.xgplayer.play();
}
}
});
})
},
//加载文档课件
loadDocument: function (fileId, state) {
var _this = this;
this.pluginType = 1;
this.trigger('Document_loaded');
//加载文档判断如果有视频播放器，先销毁
if(this.xgplayer){
this.xgplayer.forceDestroy();
}
setTimeout(function(){
_this.xgplayer = null;
if (state != 2) {
_this.$("#video-Player").html("<div style='width:100%;margin-top:30%;text-align:center;font-size:18px;color:#f99933'>文档正在转码中...</div>");
_this.isClicking = 0;
return;
}
PDFObject.embed(window._ctx+"/tmpfile/pdffile?fid=" + fileId, "#video-Player", {
forcePDFJS: true,
PDFJS_URL: window._ctx+"/lib/pdfjs/web/viewer.html"
});
_this.isClicking = 0;
},200);
},
/**
* 弹出打卡点组装
*/
_doClockIn:function(){
var _this = this;
var clockInTimeArr = [];
if(window.timilistParam.clockInConfig){
var clockInTime = window.timilistParam.video[this.playingVideo.videoId];
if(!clockInTime || clockInTime.length == 0){
return clockInTimeArr;
}
_.each(clockInTime, function (i) {
clockInTimeArr.push({time:i,cb:function(cbObj){
_this.doClocKInTimeCb.call(_this,cbObj);
}});
})
}
return clockInTimeArr;
},
//打卡时间到了回调
doClocKInTimeCb:function(cbObj){
var position = this.xgplayer.currentTime;
var docTime = 0;
if(cbObj){
docTime = cbObj.time?cbObj.time:0;
}
this.packClockData(docTime,position);
},
//视频打卡 组装打卡数据
packClockData:function(docTime,position){
var _this = this;
var configParams = window.timilistParam.clockInConfig;
var clockInType = configParams.clockInType;
var countDown = configParams.countDown;
this.timeOutClockInAjax(docTime,-1,clockInType,function(resp){
var resInfo = resp;
if(!resInfo || !resInfo.id){
return false;
}
if (_this.xgplayer) {
_this.xgplayer.pause();
}
resInfo.clockInType = configParams.clockInType;
resInfo.countDown = countDown;
resInfo.tjzjType = _this.tjzjType;
resInfo.chapterId = _this.playingVideo.chapterId;
resInfo.clockIn = 0;//0-随堂打卡1-随堂抽查
//天津职教需要传的参数。课程视频播放的位置
resInfo.videoStudyTime = position;
_this.clockInHandler(resInfo, _this.playingVideo.videoId);
});
},
//打卡点到了之后请求后台接口
timeOutClockInAjax: function (clockInDot,clockManageId,clockInType,cb) {
var _this = this;
var configParams = window.timilistParam.clockInConfig;
var chapterId = this.playingVideo.chapterId;
var countDown = configParams.countDown;
//天津职教项目，且天津职教接口里有过期时间
if(this.tjzjType == 1 && this.tjzjExpiresTime > 0){
countDown = this.tjzjExpiresTime;
}
$.ajax({
type: 'post',
_removeLoading: true,
url: '/services/org/member/study/clockInDot',
data: {
courseId: window.courseId,
projectId:window.p.projectId,
videoId:_this.playingVideo.videoId?_this.playingVideo.videoId:-1,
clockInDot:clockInDot?clockInDot:0,
thirdCourse:0,
tjzj:_this.tjzjType == 1?0:1,
clockInRule:configParams.clockInRule,
clockInType:clockInType,
clockManageId:clockManageId,
chapterId:_this.tjzjType == 1?chapterId:"",
countDown:countDown,
bizCode:_this.tjzjBizCode?_this.tjzjBizCode:""
},
success: function (resp) {
if(resp.success){
cb(resp.data);
}
},
error: function (xhr, textStatus, errorThrown) {
var status = xhr.status;
var message = xhr.responseJSON.message ||"操作失败";
dialog.msg(message);
}
});
},
//弹出课程打卡
clockInHandler: function (resInfo, vid, finish) {
var _this = this;
resInfo.thirdCourse = 0;//0-不是爱课程1-爱课程
//如果全屏播放，强制退出全屏
var isFullscreen = this.isFullscreen();
if (isFullscreen) {
this.xgplayer.exitFullscreen()
}
this.isClockDialog = 1;
console.log(this.xgplayer,"==================");
// this.xgplayer.config.disableProgress = true;
require(["js/app/views/video/dialog/clockIn-89b4ffb906.js"], function (ClockInView) {
var clockInView = new ClockInView();
clockInView.resInfo = resInfo;
clockInView.handlerType = 0 //layer 弹窗操作类型0-确定打卡1-继续学习
clockInView.vid = vid,
clockInView.finish = finish
$("#modal").html(clockInView.render().el);
_this.clockdialog = dialog.open({
title: resInfo.clockIn == 0 ? "随堂打卡" : "随堂抽查",
closeBtn: 0,
content: $("#modal"),
area: ['650px', '500px'], //宽高
// btn:['确定打卡'],
zIndex: 99999,
});
});
},
//点击继续学习继续学习
cloickContinuePlay: function (finish) {
if (finish) {
this.autoClickNext();
} else if (this.xgplayer) {
this.xgplayer.play();
}
},
//课程点击量，包括浏览量、播放量接口=》后台要求进入详情页面调用接口
recordCourseHitNum:function(){
//source-自建1-选购
var schemaType = window.detailInfo.source == 0?1:3;
$.ajax({
url: "/services/course/public/course/course_hits/"+window.courseId,
dataType: "json",
_removeLoading: true,
type: "post",
async: true,
data: {
visitType:1 ,//visitType 1-播放2-查看
schemaType:schemaType //schemaType 1-源课程2-开放课3-推送过来的课
},
success: function (res) {
if (res.success) {
}
},
error: function (xhr) {
if (xhr && xhr.responseJSON) {
var message = "请求失败";
message = xhr.responseJSON.message || message;
console.error(message);
}
}
});
},
render: function () {
var tabContent = this.$("#video-tabContent");
$(".g-content-wrapper").css({ 'min-height': $(window).height() - 49 })
this.$("#video").css({ "min-height": $(window).height() - (48 + 42 + 20) + "px" })
$(".video-tab-bd .catalog").css({ height: $(window).height() - (48 + 42 + 50 + 20) + "px" });
$(".video-tab-bd .note").css({ height: $(window).height() - (48 + 42 + 50 + 20) + "px" });
$(window).resize(function () {
$(".g-content-wrapper").css({ 'min-height': $(window).height() - 49 })
$(".video-wrapper .video").css({ 'min-height': $(window).height() - 70 + 20 + "px" });
$(".video-tab-bd .catalog").css({ height: $(window).height() - 121 + 20 + "px" });
$(".video-tab-bd .note").css({ height: $(window).height() - 121 + 20 + "px" });
});
$(document).on("keyup",function(){
if(event.keyCode == 32){
return false;
}
});
return this;
},
});
return new view;
})
这个js是播放器的.里面有很多控制的函数.请问可以屏蔽这些函数吗.比喻说多个视频播放.通过本地post数据到服务器,实现快速播放吗....```
问问大师
置顶卡
沉默卡
照妖镜
