Created
April 17, 2020 03:08
-
-
Save ShapeLayer/762a553d7ff1b1636a1a289b799531b7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
var iframeApiSelector = $("script[src*='iframe_api.js']"); | |
if( iframeApiSelector.length > 0 ){ | |
iframeApiSelector.remove(); | |
} | |
var widgetApiSelector = $("script[src*='www-widgetapi.js']"); | |
if( widgetApiSelector.length > 0 ){ | |
widgetApiSelector.remove(); | |
} | |
var s = document.createElement('script'); | |
s.type = 'text/javascript'; | |
s.async = true; | |
s.src = '/js/egovframework/com/ebs/youtube/iframe_api.js'; | |
var x = document.getElementsByTagName('script')[0]; | |
x.parentNode.insertBefore(s, x); | |
})(); | |
var totalLrnTime = 0; | |
var revivTime = Number( "2969" ); | |
// var halfRevivTime = Math.ceil( revivTime / 2 ); | |
var halfRevivTime = Number(revivTime *0.66); //학습 완료 커트라인 초 | |
//동영상 총 재생시간의 절반타임 | |
// var lrnTime = halfRevivTime; | |
//var lrnTime = halfRevivTime; | |
var lrnTime = 120; //2분 주기로 학습저장 | |
//2분보다 영상이 작을경우 커트라인 초에 학습저장 | |
if(revivTime < lrnTime) lrnTime = halfRevivTime; | |
var action; | |
var cntntsTyCode = "015"; | |
var tuieditor; | |
//동영상 리스트 JSON 데이터 | |
var mvpListJsonArray; | |
if( !fncIsEmpty( '[{"src":"http:\/\/ochigh.ebssw.kr\/M41M2001\/S20200000065\/S20200000065_1M4_000000248778.mp4","type":"video\/mp4"}]' ) ){ | |
mvpListJsonArray = JSON.parse( '[{"src":"http:\/\/ochigh.ebssw.kr\/M41M2001\/S20200000065\/S20200000065_1M4_000000248778.mp4","type":"video\/mp4"}]' ); | |
} | |
//북마크 리스트 JSON 데이터 | |
var bkmkListJsonArray; | |
if( !fncIsEmpty( '[]' ) ){ | |
bkmkListJsonArray = JSON.parse( '[]' ); | |
} | |
//동영상 트랙 리스트 JSON 데이터 | |
var tracksListJsonArray = null; | |
if( !fncIsEmpty( '[]' ) ){ | |
tracksListJsonArray = JSON.parse( '[]' ); | |
} else { | |
tracksListJsonArray = null; | |
} | |
$(document).ready(function(){ | |
var content = [ $("#lctreCn").val() ].join('\n'); | |
//TOAST UI VIEWER | |
tuieditor = new tui.Editor({ | |
el: document.querySelector('#toastUiEditorViewer'), | |
height: '300px', | |
initialValue: content, | |
exts: [ | |
'uml', | |
'mark', | |
'table' | |
] | |
}); | |
}); | |
function mvpLctreLrnSave( action, fnc ){ | |
var lctreSeCode = $("#lctreSeCode").val(); | |
var atnlcNo = $("#atnlcNo").val(); | |
var lctreSn = $("#lctreSn").val(); | |
var stepSn = $("#stepSn").val(); | |
var lctreSeCode = $("#lctreSeCode").val(); | |
//콘텐츠 타입 코드 | |
var cntntsTyCode = $("#cntntsTyCode").val(); | |
//동영상 총 재생시간 | |
var revivTime = $("#revivTime").val(); | |
//현재 동영상 재생 위치 | |
//유튜브 | |
var lastRevivLc; | |
if( cntntsTyCode == "014" ){ | |
var currentTime = 0.0; | |
if( youtubePlayer !== undefined && youtubePlayer !== null && youtubePlayer !== "" ){ | |
currentTime = !youtubePlayer.getCurrentTime ? 0.0 : youtubePlayer.getCurrentTime(); | |
} | |
lastRevivLc = parseInt( currentTime ); | |
} else { | |
if( !fncIsEmpty( playerObj ) ){ | |
lastRevivLc = parseInt( playerObj.currentTime() ); | |
} | |
} | |
var postData = {}; | |
postData.atnlcNo = atnlcNo; | |
postData.lctreSn = lctreSn; | |
postData.stepSn = stepSn; | |
postData.lctreSeCode = lctreSeCode; | |
postData.cntntsTyCode = cntntsTyCode; | |
postData.revivTime = revivTime; | |
//동영상 정지 이벤트인 경우 시청구간만큼만 UPDATE | |
if( !fncIsEmpty( action ) ){ | |
if( action == "STOP" || action == "CLOSE" || action == "CHANGE" ){ | |
if ( startLrnTime != null ){ | |
stopTime = new Date().getTime() - startLrnTime; //정지 시간 | |
// stopSeconds = Math.ceil( stopTime / 1000 ); //정지시간 초로 환산 | |
stopSeconds = stopTime / 1000; //정지시간 초로 환산 | |
totalLrnTime += stopSeconds; | |
startLrnTime = null; | |
} | |
} | |
} else { | |
totalLrnTime = lrnTime; | |
startLrnTime = new Date().getTime(); //플레이 시간 | |
} | |
//마지막 재생위치 | |
if( !fncIsEmpty( lastRevivLc ) ){ | |
postData.lastRevivLc = lastRevivLc; | |
} | |
//학습창을 종료하는 경우에는 PASS | |
//동영상 강의를 총 플레이한 시간이 학습기준 시간보다 크거나 같은 경우에만 UPDATE | |
if( action !== "CLOSE" && action !== "CHANGE" && totalLrnTime < lrnTime ){ | |
return; | |
} | |
if( action == "CLOSE"){ | |
//학습창 학습종료시 완강처리 | |
postData.endButtonYn = "Y"; | |
} | |
//총 학습한 시간이 없는 경우 | |
if( totalLrnTime < 1 ){ | |
//callback | |
if( fnc ){ | |
fnc(); | |
} | |
return; | |
} | |
postData.lrnTime = Math.ceil( totalLrnTime ); | |
fncPost( "/mypage/userlrn/lctreLrnSave.do", postData, function(data){ | |
var result = data.result; | |
if( result == "SUCCESS" ){ | |
//UPDATE하고 나면 총학습시간 초기화 | |
totalLrnTime = 0; | |
if(action == "TIMEOUT" ){ | |
clearTimeout(mvpLctreLrnTimeout); | |
clearInterval( mvpLctreLrnInterval ); | |
mvpLctreLrnInterval = setInterval( mvpLctreLrnSave, lrnTime * 1000 ); | |
} | |
var userLrnVO = data.userLrnVO; | |
var lctreSn = userLrnVO.lctreSn; | |
var lrnAt = userLrnVO.lrnAt; | |
if( !fncIsEmpty( lrnAt ) && lrnAt == 1 ){ | |
$("#leftLctre_" + lctreSn).removeClass("on"); | |
$("#leftLctre_" + lctreSn).addClass("on"); | |
opener.location.reload(); | |
} | |
//callback | |
if( fnc ){ | |
fnc(); | |
} | |
} else if( result == "NO_AUTH" ){ | |
alert("해당 강좌를 학습 할 수 없습니다."); | |
window.close(); | |
} else if( result == "SESSION_EXPIRED" ){ | |
alert("세션이 만료되었습니다."); | |
window.close(); | |
} | |
}); | |
} | |
/** | |
* 플레이어 셋팅 | |
*/ | |
var startLrnTime = null; | |
//유튜브 | |
if( cntntsTyCode == "014" ){ | |
var YT = null; | |
/** | |
* onYouTubeIframeAPIReady 함수는 필수로 구현해야 한다. | |
* 플레이어 API에 대한 JavaScript 다운로드 완료 시 API가 이 함수 호출한다. | |
* 페이지 로드 시 표시할 플레이어 개체를 만들어야 한다. | |
*/ | |
var youtubePlayer; | |
function onYouTubeIframeAPIReady() { | |
youtubePlayer = new YT.Player('iframeYoutube', { | |
events: { | |
'onReady': onPlayerReady, // 플레이어 로드가 완료되고 API 호출을 받을 준비가 될 때마다 실행 | |
'onStateChange': onPlayerStateChange // 플레이어의 상태가 변경될 때마다 실행 | |
} | |
}); | |
} | |
function onPlayerReady(event) { | |
var lastRevivLc = "118"; | |
youtubePlayer.seekTo( lastRevivLc ); | |
} | |
var playerState; | |
function onPlayerStateChange(event) { | |
//재생됨 | |
if( event.data == YT.PlayerState.PLAYING ){ | |
if( startLrnTime == null ){ | |
startLrnTime = new Date().getTime(); | |
} | |
var lctreSn = $("#lctreSn").val(); | |
//001 : 조회, 002 : 다운로드, 003 : 동영상플레이 | |
// fncCntntsUseInsert( "003", lctreSn ); | |
clearTimeout(mvpLctreLrnTimeout); | |
clearInterval( mvpLctreLrnInterval ); | |
//동영상을 보다가 stop 을 하고 다시 start를 한 경우 lrnTime 기준시간이 되면 | |
//한번 서버로 보내줘야함 | |
if( totalLrnTime > 0 ){ | |
mvpLctreLrnTimeout = setTimeout( function(){ | |
mvpLctreLrnSave("TIMEOUT"); | |
}, (lrnTime - totalLrnTime) * 1000 ); | |
} else { | |
mvpLctreLrnInterval = setInterval( mvpLctreLrnSave, lrnTime * 1000 ); | |
} | |
//재생되지 않음 | |
} else { | |
clearTimeout(mvpLctreLrnTimeout); | |
clearInterval( mvpLctreLrnInterval ); | |
mvpLctreLrnSave( "STOP" ); | |
} | |
} | |
} else { | |
//플레이어가 남아 있는경우 플레이어 삭제 후 다시 로드 | |
if( !fncIsEmpty( playerObj ) ){ | |
playerObj.dispose(); | |
loadVideoPlayer(); | |
} else { | |
if( !isPlayerReady ){ | |
document.addEventListener('learnplayerReady', function () { | |
loadVideoPlayer(); | |
}); | |
} else { | |
loadVideoPlayer(); | |
} | |
} | |
} | |
//플레이어 준비 상태 (동영상 강의 진입시 TRUE) | |
isPlayerReady = true; | |
//비디오 플레이어 셋팅 | |
function loadVideoPlayer(){ | |
var lastRevivLc = "118"; | |
playerObj = videojs('playerEl', { | |
autoplay: false, // 자동 재생 사용 여부 [false | true | muted | play | any] | |
preload: "metadata", // 비디오 데이터를 미리 다운로드할지 여부 [auto | true | metadata | none] | |
fluid: true, // 가로 세로 고정값이 아닌 부모 컨테이너에 맞게 유동 변경 여부 | |
playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5], // 배속 목록 | |
// bookmarks: { isUse: false }, // 북마크 전달정보 | |
bookmarks: { | |
isUse: true, // 노출여부 | |
items: bkmkListJsonArray, | |
extraFunctions: { | |
add: addLrnBookmark, | |
modify: modifyLrnBookmark, | |
remove: deleteLrnBookmark | |
} | |
}, // 북마크 전달정보 | |
// 영상 품질 정보 | |
sources: mvpListJsonArray, | |
tracks : tracksListJsonArray, | |
topbar: { | |
topbarText: { | |
isUse : false, | |
title: '' | |
} // 학습도구 영역의 타이틀 정보 (통상 강의명이 노출) | |
}, // 학습도구 영역 옵션 | |
continue: { | |
time: lastRevivLc, // 이어보기 위치 | |
isShowMessage: true, // 이어보기시에 알림 레이어 노출여부 | |
messageType: "confirm", // [alert | confirm] | |
message: "마지막 학습위치에서 재생하시겠습니까?", | |
title: "" // default '알림' | |
} | |
}); | |
//재생 이벤트 | |
playerObj.on("play",function(){ | |
if( startLrnTime == null ){ | |
startLrnTime = new Date().getTime(); | |
} | |
var lctreSn = $("#lctreSn").val(); | |
//001 : 조회, 002 : 다운로드, 003 : 동영상플레이 | |
// fncCntntsUseInsert( "003", lctreSn ); | |
clearTimeout(mvpLctreLrnTimeout); | |
clearInterval( mvpLctreLrnInterval ); | |
//동영상을 보다가 stop 을 하고 다시 start를 한 경우 lrnTime 기준시간이 되면 | |
//한번 서버로 보내줘야함 | |
if( totalLrnTime > 0 ){ | |
mvpLctreLrnTimeout = setTimeout( function(){ | |
mvpLctreLrnSave("TIMEOUT"); | |
}, (lrnTime - totalLrnTime) * 1000 ); | |
} else { | |
mvpLctreLrnInterval = setInterval( mvpLctreLrnSave, lrnTime * 1000 ); | |
} | |
}); | |
//일시정지 이벤트 | |
playerObj.on("pause",function(){ | |
clearTimeout(mvpLctreLrnTimeout); | |
clearInterval( mvpLctreLrnInterval ); | |
mvpLctreLrnSave( "STOP" ); | |
}); | |
} | |
//북마크 추가 | |
function addLrnBookmark() { | |
var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | |
var postData = {}; | |
postData.bkmkNm = item.text; | |
postData.bkmkBeginTime = item.startTime; | |
postData.bkmkEndTime = item.endTime; | |
postData.atnlcNo = "706838"; | |
postData.lctreSn = "5545970"; | |
postData.cntntsSn = "12901"; | |
fncPost("/mypage/userlrn/mvpBkmkSave.do", postData, function( data ){ | |
}); | |
} | |
//북마크 수정 | |
function modifyLrnBookmark() { | |
var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | |
// var player = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | |
// var callbackFunction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {}; | |
var postData = {}; | |
postData.bkmkSn = item.dbSeq; | |
postData.bkmkNm = item.text; | |
postData.bkmkBeginTime = item.startTime; | |
postData.bkmkEndTime = item.endTime; | |
fncPost("/mypage/userlrn/mvpBkmkUpdate.do", postData, function( data ){ | |
}); | |
} | |
//북마크 삭제 | |
function deleteLrnBookmark() { | |
var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | |
// var player = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | |
var postData = {}; | |
postData.bkmkSn = item.dbSeq; | |
fncPost("/mypage/userlrn/mvpBkmkDelete.do", postData, function( data ){ | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment