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

샘플 : 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;
                }
            }
        }
   
    };