사용자함수 HTML5 비디오태그를 이용한 동영상플레이어(학습용)
페이지 정보
본문
----------------------------- common_eLearning.css -------------------------------
/*이러닝 플레이어 레이아웃*/
#el_player { position:fixed; width:960px; left:50%; top:50%; margin:-340px -480px; padding:0; background-color:#181818; z-index:2147483647; }
#el_header { position: relative; width:100%; height:60px; margin:0; padding:0; }
#el_header>h1 { display: inline-block; padding:15px 10px; vertical-align:middle; color:#d1d1d1; }
#el_header>h1>span { padding: 0 10px; }
#el_header>button { display:bolck; position:absolute; right:20px; top:20px }
#el_viewer { position: relative; width:100%; height:540px; margin:0;padding:0; }
#el_viewer>video {width:960px; height:540px; z-index:1;}
#el_viewer>button { position:absolute; display:bolck; margin:-48px 0 0 -48px; left:50%; top:50%; }
#el_controller { display:bolck; width:100%; height:80px; }
#el_controller.normal { position: relative; z-index:999; }
#el_controller.full { position: absolute; z-index:2147483646; }
#el_controller>li { float: left; }
#el_btn_play { margin: 32px 0 0 22px; }
#el_bar_progress { position:relative;margin-left:22px; width:700px; }
#el_bar_progress>img {position:absolute; margin:-13px -8px 0 -8px; cursor:pointer; }
#el_track_bg { position:relative;margin: 35px 0 0 0px; width:100%; height:10px; background-color:#444; }
#el_track_ed { width:0%; height:10px; background-color:#777; }
#el_track_ing { width:0%; height:10px; background-color:#6d80e6;}
#el_bar_progress>ol>li>img { position:absolute; margin:-40px -11px 0 -11px;left:0; }
#el_timecoder { font-size:1em; color:#999; padding:0; margin:33px 0 0 20px; }
#el_timecoder>span { color:#eaeaea; padding:2px; }
#el_btn_sound > button { margin:32px 0 0 20px; }
#el_bar_volume {
position:absolute;
height:75px;
padding: 11px 0;
margin:-150px 0 0 16px;
background-color:#181818;
z-index:3;
display:none;
}
#el_vol_track_bg {
position:relative;
width:28px;
height:75px;
margin:0;
padding:0;
background:url(../img/bg_volume_on.gif) 0 -11px repeat-y;
}
#el_vol_track_bg>div {
top:100%;
width:100%;
height:0%;
margin:0;
padding:0;
background:url(../img/bg_volume_off.gif) 0 -11px repeat-y;
}
#el_vol_track_bg>img { position:absolute; left:50%; top:0%; margin:-11px 0 -0px -11px; cursor:pointer; }
#el_bar_volume>img {position:absolute;margin-top:11px; }
/* 풀스크린버튼 일단 감춰놓음. 20151110 */
#el_btn_full > button { margin:32px 0 0 10px; display:none; }
#el_win { position: absolute; width:100%; height:100%; display:none; }
#el_win_bg { position: absolute; width:100%; height:100%; background-color: black; opacity:0.5; z-index:10; }
#el_win_dialogue { position: absolute;
left:50%; top:50%; margin:-138px 0 0 -204px;
width: 409px; height: 277px; background:url(../img/win_dialogue.png); z-index:11;
text-align: center;
}
#el_win_dialogue>h4 { font-size: 3em; font-weight: bold; color:#6d80e6; padding:1.5em 0 0.5em 0; }
#el_win_dialogue>p { font-size:1.4em; padding:0.8em; line-height:1.6em; }
#el_win_dialogue>button {}
----------------------------- common_eLearning.js -------------------------------
var EL = {
id : null, //user_id
no : null, //콘텐츠번호
sqLinkYn : null, //콘텐츠번호
posCode : null, //저장된 위치코드
nowPosCode : null, //현재 위치코드
video : null,
player : null, //플래시플레이어
Metas : null, //이러닝전체콘텐츠의 메타 처음에 다 불러오기
nowMeta : null, //현재 선택된 콘텐츠의 메타
played : { old:0, now:0 }, //진도율(저장된 진도율, 신규 진도율) - (회원idx,콘텐츠idx) 시작진행율..
sq : null, //SQ획득상태 임시저장소
init : function( no, id, sqLinkYn ){
//비디오태그 지원여부 확인
if( document.getElementById("el_video") ){
if(document.getElementById("el_video").canPlayType && (navigator.userAgent.toLowerCase().indexOf('opera') == -1)){
EL.video = document.getElementById("el_video");
}
}
if(id) this.id = id;
if(no) this.no = no;
if(sqLinkYn) this.sqLinkYn = sqLinkYn;
console.log(this.id+"님이 "+this.no+"번 영상을 재생합니다.");
this.sq = []; //SQ획득 임시저장소 초기화
$("#el_win").hide();
//회원학습이력 불러오기
$.ajax({
//url : "api/contents/getPosCode", //cny
url : "js/_getPosCode.json", //cny
type: "POST",
data: {"user_idx" : EL.id, "contents_idx" : EL.no }, //로그인된 아이디, 현재 콘텐츠
dataType : "json",
success : function(data){
console.log("처리상태: "+data.returnCode);
if(data.pos_code>=100) data.pos_code = 0;
EL.posCode=EL.played.old = EL.played.now = data.pos_code; //cny
if(EL.Metas == null) {
EL.metaLoad();
}else{
EL.metaReset(no);
}
},
error:function(e){
var returnCode = "001"; //cny
var returnMessage = "[ERROR]통신오류가 발생하였습니다."; //cny
alert("returnCode: "+ returnCode+" / returnMessage: "+ returnMessage); //cny
}
});
},
//동영상종료 함수
exitVideo : function(mode){
if(this.video) {
//동영상제거
if(!this.video.paused) $("#el_btn_play>button").click();
}else{
$("#el_viewer").html("");
}
//창닫기
if(mode=="close") {
$("#el_pop").hide();
}
},
//메타데이터 불러오기(처음)
metaLoad : function(){
console.log("메타로드...");
$.ajax({
//url : "/resources/e_learning/js/_metaData.json", //cny
url : "js/_metaData.json", //cny
dataType : "JSON",
success : function(data){
EL.Metas = data;
console.log("data로드완료:"+EL.Metas )
EL.metaReset();
},
error:function(e){
alert(e.responseText);
}
});
},
//메타데이터 설정
metaReset : function(no){
if(no) {
this.no = no;
}
this.nowMeta = this.Metas["EL_"+this.no];
//HTML5지원브라우저와 플래시MP4플레이어에서의 재생
if(this.video) {
//제목삽입
$("#el_header>h1").html("<span>["+this.nowMeta.subject+"]</span><strong>"+this.nowMeta.title+"</strong>");
//EL.video = document.getElementById("el_video");
if(no) {
if(sqLinkYn == "Y") {
this.setSQ();
}
this.setVideo();
}else{
this.Controller.init();
}
}else{//cny
$("#el_header").hide();
$("#el_controller").hide();
var param = "con_idx="+this.no+"&user_idx="+this.id+"&posCode="+this.posCode+"sqLinkYn="+this.sqLinkYn;
$("#el_viewer").html( this.getFlashTAG("mp4/EL_player.swf", param, 960, 680, true) );
}
},
//학습이력 저장 및 SQ획득 처리
getResult : function(lastFlag, sq, prog_per){
if(this.sqLinkYn == "N") return;
console.log("저장-prog_per: "+ this.played.now);
if(prog_per) EL.played.now = prog_per;
$.ajax({
//url : "/api/contents/getResult", //cny
url : "js/_getResult.json", //cny
type: "POST",
data: {
"user_idx": EL.id,
"contents_idx": EL.no,
"prog_per": Math.round(EL.played.now),
"sq": sq,
//"score": score,
"pos_code": EL.played.now
},
dataType : "json",
success : function(data){
console.log("처리상태: "+data.returnCode);
if(lastFlag) {
contentsPlayCallBak();
}
},
error:function(e){
alert(e.responseText);
}
});
},
//SQ포인터 초기아이콘 설정
setSQ : function(){
var tag = '';
for( var i=0; i<this.nowMeta.sqPer.length; i++){
var used_mode = "";
if( this.nowMeta.sqPer[i] < this.played.old ) {
used_mode = "_used";
this.sq[i] = 1;
}else{
this.sq[i] = 0;
}
tag += '<li><img src="/kofac_play/contents/e_learning/img/icon_sq'+used_mode+'.png" alt="SQ획득지점('+this.nowMeta.sqPer[i]+'%)" style="left:'+this.nowMeta.sqPer[i]+'%;" /></li>';
}
$("#el_bar_progress>ol").html(tag);
},
//비디오 설정
setVideo : function(){
if(this.video) {
this.video.src = "http://srw.iptime.org:5480/kofac_play/contents/e_learning/mp4/"+EL.nowMeta.file;
//this.video.src = "http://scienceplay.kr/data/contents/e_learning/mp4/"+EL.nowMeta.file;
this.video.addEventListener("loadeddata", function(){
if(EL.video.paused) {
$("#el_btn_play > button").click();
//EL.video.play();
}
//시작시 DB학습의 진도율로 이동하여 재생하기
$("#el_track_ed").css("width", (EL.played.now/100)*EL.Controller.progTotalW+"px" );
//EL.Controller.goTrack(EL.played.now/100); //진도는 표시하되 처음부터 진행하기.
//토탈시간
$("#el_time_total").html( EL.getTimebar( EL.video.duration ,":") );
});
} else {
//cny
var param = "con_idx="+this.no+"&user_idx="+this.id+"&posCode="+this.posCode+"sqLinkYn="+this.sqLinkYn;
$("#el_viewer").html( this.getFlashTAG("mp4/EL_player.swf", param, 960, 680, true) );
}
},
getTimebar : function(t,splite){
var min = Math.floor(t/60);
var sec = Math.floor(t%60);
var time_str = "";
if( min < 10 ) time_str += "0";
time_str += min + splite;
if( sec < 10 ) time_str += "0";
time_str += sec;
return time_str;
},
Controller : {
progW : 0,
progTotalW : null,
volTotalH : null,
seekPlaying : false,
muted : false,
isFull : false,
isVolOver : false,
intervalVol : null, //볼륨바 인터발
volume : 0.5, //초기 볼륨값 50%
init : function(){
EL.Controller.progTotalW = $("#el_track_bg").width();
EL.Controller.volTotalH = $("#el_vol_track_bg").height()
EL.Controller.setHandler();
EL.video.volume = EL.Controller.volume;
EL.Controller.setVolume();
if(sqLinkYn == "Y") {
EL.setSQ();
}
EL.setVideo();
},
setHandler : function(){
//버튼이미지 롤로버
$("button>img").hover(
function(){
$(this).attr("src",
function(index,src){
return src.replace('_out','_over');
}
);
},
function(){
$(this).attr("src",
function(index,src){
return src.replace("_over","_out");
}
);
}
);
//X버튼 클릭
$("#el_header>button").on("click",function(){
if(confirm("학습을 종료하시겠습니까?")) {
EL.exitVideo("close");
EL.getResult(true, 0);
}
});
//학습완료(이수) 확인 버튼
$("#el_win_dialogue>button").on("click",function(){
EL.exitVideo("close");
contentsPlayCallBak();
});
if(EL.video){
$("#el_btn_play > button, #el_viewer > button").click(function(){
if(EL.video.paused) {
$("#el_viewer > button").fadeOut(500);
$("#el_btn_play > button").find("img").attr({"src":"/kofac_play/contents/e_learning/img/btn_pause_out.png","alt":"일시멈춤"});
$("#el_viewer > button").find("img").attr({"src":"/kofac_play/contents/e_learning/img/btn_pause2_out.png","alt":"일시멈춤"});
EL.video.play();
}else{
$("#el_viewer > button").show();
$("#el_btn_play > button").find("img").attr({"src":"/kofac_play/contents/e_learning/img/btn_play_out.png","alt":"재생"});
$("#el_viewer > button").find("img").attr({"src":"/kofac_play/contents/e_learning/img/btn_play2_out.png","alt":"일시멈춤"});
EL.video.pause();
}
});
$("#el_viewer").hover(
function(){
$("#el_viewer > button").show();
},
function(){
$("#el_viewer > button").hide();
}
);
EL.video.addEventListener("timeupdate", function(){
if(EL.video.paused) {
$("#el_viewer > button").show();
return false;
}
EL.Controller.goTrack();
});
EL.video.addEventListener("ended", function(){
//console.log("재생을 마쳤으니 퀴즈풀기 로직으로 가라.");
this.pause();
$("#el_win_dialogue>p>span").html(" x "+EL.sq.length+"개");
$("#el_win").fadeIn(500);
});
//재생트랙 조절기 드래그
$("#el_bar_progress>img").draggable({
axis: "x",
containment: "parent",
start: function() {
//만약 재생중이라면 재생중인값 임시 저장하고 멈춤.
if(!EL.video.paused) {
EL.Controller.seekPlaying = true;
$("#el_btn_play > button").click();
}
//console.log("totalTime: "+EL.video.duration); //전체타임 정보를 알기위해...
},
drag: function(event, ui) {
var pointX = parseInt(this.style.left,10);
var edW = parseInt(document.getElementById("el_track_ed").style.width,10);
//console.log("edW: "+edW+"pointX: "+pointX);
if(pointX>edW) { return false; }
else $("#el_track_ing").css("width", this.style.left);
},
stop: function() {
//현재 포인터의 위치에 해당하는 재생트랙 이동
var ingW = parseInt($("#el_track_ing").css("width"),10);
EL.Controller.goTrack( ingW / EL.Controller.progTotalW );
//만약 재생중이었다면 이동후 바로 재생하라.
if(EL.Controller.seekPlaying) {
$("#el_btn_play > button").click();
EL.Controller.seekPlaying = false;
}
}
});
$("#el_bar_progress>img").click(function(){return false;}); //드래그포인터 클릭시 처음으로 이동 방지
$("#el_track_bg").click(function(){
var prog_X = event.offsetX;
var edW = parseInt($("#el_track_ed").css("width"),10);
if(prog_X>edW) return false;
if(prog_X > EL.Controller.progTotalW) prog_X = EL.Controller.progTotalW;
else if(prog_X < 0) prog_X = 0;
$("#el_bar_progress >img").css("left", prog_X+"px");
$("#el_track_ing").css("width", prog_X+"px");
EL.Controller.goTrack( prog_X / EL.Controller.progTotalW );
});
//스피커버튼 클릭(무음모드, 아이콘변경)
$("#el_btn_sound > button").click(function(){
EL.Controller.muted = EL.video.muted = !EL.video.muted;
if(EL.video.muted) {
$("#el_btn_sound > button").find("img").attr({"src":"/kofac_play/contents/e_learning/img/btn_mute_out.png","alt":"무음 모드"});
$("#el_bar_volume").hide();
}else{
$("#el_btn_sound > button").find("img").attr({"src":"/kofac_play/contents/e_learning/img/btn_speaker_out.png","alt":"사운드 모드"});
$("#el_bar_volume").show();
}
});
//스피커버튼 롤로버
$("#el_btn_sound>button").hover(
function(){
if(!EL.Controller.muted) $("#el_bar_volume").show();
},
function(){
EL.Controller.intervalVol = setTimeout( function(){
if(!EL.Controller.muted) $("#el_bar_volume").fadeOut();
},500);
}
);
//볼륨조절기 롤로버
$("#el_bar_volume").hover(
function(){
clearInterval(EL.Controller.intervalVol);
EL.Controller.intervalVol = null;
},
function(){
$("#el_bar_volume").fadeOut();
}
);
//볼룸조절기 드래그
$("#el_vol_track_bg > img").draggable({
axis: "y",
containment: "parent",
start: function() {
},
drag: function() {
var pointY = parseInt($(this).css("top"),10);
var pxY = EL.Controller.volTotalH - pointY;
var volPer = pxY / EL.Controller.volTotalH;
if(volPer<0) {
EL.Controller.setVolume(0.1);
return false;
}else if(volPer > 1) {
EL.Controller.setVolume(1);
}
EL.Controller.setVolume(volPer);
},
stop: function() {
//
}
});
$("#el_vol_track_bg > img").click(function(){return false;});
//볼륨트랙 클릭시 바로 볼륨조절
$("#el_vol_track_bg").click(function(){
var pxY = EL.Controller.volTotalH - event.offsetY;
var volPer = pxY / EL.Controller.volTotalH;
if(volPer<0) volPer = 0.1;
else if(volPer > 1) volPer = 1;
EL.Controller.setVolume(volPer);
});
$("#el_btn_full>button").click(function(){
if(EL.Controller.isFull){
EL.Controller.isFull = false;
document.getElementById("controller").className = "normal";
}else{
document.getElementById("controller").className = "full";
EL.Controller.isFull = true;
if (EL.video.requestFullscreen) {
EL.video.requestFullscreen();
} else if(EL.video.msRequestFullscreen){ //document.msFullscreenEnabled
EL.video.controls = true;
EL.video.msRequestFullscreen();
} else if (EL.video.mozRequestFullScreen) {
EL.video.mozRequestFullScreen();
} else if (EL.video.webkitRequestFullscreen) {
EL.video.webkitRequestFullscreen();
} else {
EL.Controller.screenFull(1);
$(document).on("keydown", function(e){
if(e.keyCode==27) {
EL.Controller.screenFull();
}
});
}
$(EL.video).on("volumechange", function(){
EL.Controller.setVolume();
});
}
});
document.addEventListener("webkitfullscreenchange", function(){
if(!document.webkitIsFullScreen){
$(EL.video).off("volumechange");
}
});
document.addEventListener("mozfullscreenchange", function(){
if(document.mozFullScreen){
EL.video.controls = true;
}else{
$(EL.video).off("volumechange");
EL.video.controls = false;
}
});
document.addEventListener("MSFullscreenChange", function(){
if(!document.msFullscreenElement){
EL.video.controls = false;
$(EL.video).off("volumechange");
}
});
}
},
setVolume : function(v){
if(v) EL.Controller.volume = EL.video.volume = v;
var per = (1-EL.Controller.volume)*100;
$("#el_vol_track_bg > div").css("height", per+"%");
$("#el_vol_track_bg > img").css("top", per+"%");
if( EL.Controller.muted == EL.video.muted ) return false;
else EL.Controller.muted = EL.video.muted;
if(EL.video.muted) {
$("#el_btn_sound > button").find("img").attr({"src":"/kofac_play/contents/e_learning/img/btn_mute_out.png","alt":"무음 모드"});
}else{
$("#el_btn_sound > button").find("img").attr({"src":"/kofac_play/contents/e_learning/img/btn_sound_out.png","alt":"사운드 모드"});
}
},
resetBtn : function(){
$("#el_btn_play > button").find("img").attr({"src":"/kofac_play/contents/e_learning/img/btn_play_out.png","alt":"재생"});
$("#el_time_current").html("00:00");
EL.Controller.goTrack(0);
},
goTrack : function(per){
if(per) {
//console.log("per: "+per);
EL.video.currentTime = per * EL.video.duration; //트래킹 했을때
}else{
var play_per = EL.video.currentTime/EL.video.duration;
var position = (play_per * EL.Controller.progTotalW);
//console.log("play_per: "+play_per);
//신규 진도율 처리
var per_100 = play_per*100;
//console.log(play_per); 실시간 위치코드
if(per_100>EL.played.now) {
$("#el_track_ed").css("width", position+"px" );
EL.played.now = per_100;
//sq이벤트처리
if(sqLinkYn == "Y") {
for( var i=0; i<EL.nowMeta.sqPer.length; i++){
if(EL.sq[i]==0 && EL.nowMeta.sqPer[i]==Math.round(per_100)) {
console.log((i+1)+"번째 SQ를 획득하였네요.");
$( "#el_bar_progress>ol>li>img").eq(i).effect( "pulsate", "slow",
function(){
$(this).attr("src","/kofac_play/contents/e_learning/img/icon_sq_used.png");
}
);
EL.sq[i] = 1;
if(per_100>99.5) {
EL.played.now = 100;
EL.getResult(true, 1);
}else{
EL.getResult(false, 1);
}
}
}
}
}
document.getElementById("el_track_ing").style.width = position+"px";
$("#el_bar_progress > img").css("left", position+"px" );
}
$("#el_time_current").html( EL.getTimebar( EL.video.currentTime ,":") );
},
screenFull : function(on){
if(on){
EL.video.controls = true;
$(EL.video).css({'position':'fixed','width':'100%','height':'100%','margin':0,'top':0,'left':0,'z-index':600});
}else{
$(EL.video).css({'position':'relative','width':'1089px','height':'613px','z-index':1});
$(document).off("keydown");
$(EL.video).off("volumechange");
setTimeout( function(){ EL.video.controls = false; },100);
}
}
},
getFlashTAG : function(swf, param, width, height, w_mode){
var FlashStr = '<object id="flash_player" class="flash_obj" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="' + width + '" height="' + height + '" VIEWASTEXT>';
FlashStr += '<param name="movie" value="' + swf + '">';
FlashStr += '<param name="quality" value="high">';
FlashStr += '<param name="allowScriptAccess" value="sameDomain" />';
FlashStr += '<param name="allowFullScreen" value="true" />';
if(param) FlashStr += '<param name="flashVars" value="'+param+'" />';
if(w_mode) FlashStr += '<param name="wmode" value="transparent">';
FlashStr += '<embed class="flash_obj" src="' + swf + '" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowFullScreen="true" width="' + width + '" height="' + height + '"></embed>';
FlashStr += '</object>';
return (FlashStr);
},
getMinCSS : function(min_mode){
var cssStr ="";
if(min_mode){
cssStr += '#wrap { width: 100%; margin: auto; overflow:visible }';
cssStr += '#container { position: relative; width:100%; z-index:2; margin:auto; }';
cssStr += '#navigator { float:none; position:absolute; top:124px; height:755px; z-index:3000 }';
cssStr += '#navigator>div { height:635px; }';
관련링크
- 이전글obj.execCommand() 16.02.19
- 다음글퀴즈게임: 카드뒤집기 15.10.16
댓글목록
등록된 댓글이 없습니다.
