[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;
                }
            }
        }
   
    };

저작자표시비영리변경금지

'컴터 > html5' 카테고리의 다른 글

iPad(아이패드) 사파리 코딩시 QUOTA_EXCEEDED_ERR 에러 날때.  (0)	2010.08.18
html5 비디오 코덱 지원 여부 스크립트  (0)	2010.08.15
[html5 예제] video 태그위에 자막 비슷하게  (3)	2010.06.26
[html5 동영상] 인코딩 유틸 (ogg theora, H.264)  (3)	2010.06.24
[html5 sqlite] chrome의 괜찮은 sqlite db 관리툴  (0)	2010.06.23