[html5 예제] video 태그위에 자막 비슷하게

컴터/html5 2010. 6. 26. 21:14


샘플 : http://whatdo.net/html5/example/#6
인코딩 툴 : http://nosmoke.cctoday.co.kr/1067

애니를 자주 보는데,
플레이어 어플처럼 자막을 입혀 보았습니다.

자막 파일 .smi 파일을 읽어와서 시간에 맞춰 불러들이는 것입니다.

로컬파일을 읽어 오고 싶었지만, 역시 정책상 막아놓았네요.
서버측에서 html5 코덱으로 인코딩후 smi 파일을 같이 올려놓으면 자막과 같이 플레이 되게하는 그냥 간단한 아이디어 겸 메모였습니다. ^^


javascript (jquery) :::

var p = {
        vars:[자막파일],

        logWrite:function(v){
            //for(var i in v)
                $("#log").append(v+"<br />");
        },

        mPos:function(){
            if(p.vars.length<=0)
                location.reload();


            var po = $("#player").position();
            $("#subtitle").css({'top':po.top, 'left':po.left});
        },

        updateTime:function(e){
            //p.logWrite(e.target.currentTime);
            var t = Math.floor(e.target.currentTime*1000);
            var o = p.vars[0];
           
            for(var i in o){
                //p.logWrite(i+":"+o[i]+"<br />");
                if(t <= i && t+200 > i){
                    //p.logWrite(t+":"+i+"="+o[i]+"<br />");
                    document.querySelector('#subtitle').innerHTML = o[i];
                    return;
                }
            }
        }
   
    };

Trackbacks 0 : Comments 3
  1. 따끈한도시락 2013.01.16 06:08 Modify/Delete Reply

    잘 보았습니다. 감사합니다.

  2. 따끈한도시락 2013.01.16 09:30 Modify/Delete Reply

    저 위의 구조라면 자막파일 대신 직접 자막을 입력해도 되겠군요.

Write a comment