메인메뉴 바로가기

HOME으로 가기


Javascript

사용자함수 | 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; }';

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기