티스토리 뷰
샘플 : 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;
}
}
}
};
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 |
공지사항
최근에 달린 댓글
- Total
- 1,763,948
- Today
- 14
- Yesterday
- 20
링크
- Adobe AIR / www.AS3.kr / Ac⋯
- Adobe AIR Devpia.
- Beyond Tomorrow
- Blog of Shigeru Nakagaki. L⋯
- CSS3 . Info
- Code Weblog
- CodeIgniter 한국사용자포럼⋯
- ECONOBLOG
- FlexComponent-플렉스 네이버⋯
- Guru's Blog
- Hooney.net - CSS Reference⋯
- Korean Healthlog
- Raymond.CC Blog
- [Air]AIR_IN_ACTION
- [CSS]후니넷
- [Flex] css 스킨
- [JavaFx] 한글화
- [basic4ppc]괜찮은 사이트
- [flex2책저자]with okgosu (-⋯
- [flex] stylesheet
- [flex] 예제 많은곳-EBook관련
- [flex]ungsung' study
- [html5-canvas]『 zeroone 』⋯
- [html5-iphone]xguru.net
- [html5]korea html5 group
- [html5]sencha touch demos -⋯
- [iPhone]아이군의 블로그
- [iphone] 토리의 놀이터
- [iphone]LambertPark
- [iphone]safari 레퍼런스
- [iphone]피의복수
- [jQuery Plugin] 포토갤러리
- [jQuery] -- jQuery
- [jQuery] 1.1.2 API Browser
- [jQuery] IBM 사이트 설명
- [jQuery] 예제 많음
- [javascript]JKwang's Programs
- [red5]
- [그래픽js] 끝내줌.ㅋ
- [김프]무료 이미지 관리툴 -⋯
- [무료캡쳐프로그램] jing Pro⋯
- [무료호스팅]1.5Gb 줌
- [서프라이즈] - 대문
- [실버라이트] msdn
- [실버라이트]ONESTONE
- [실버라이트]ZZANGMYON BLOG♡
- [실버라이트]사진속에 혼을⋯
- [실버라이트]유령회사 공도소⋯
- [실버라이트]이과장의 프로그⋯
- [오픈소스검색엔진]루씬 한글⋯
- [해킨토시]x86osx.com
- adobe 예제 사이트
- d-|-b First Of May
- lovesera.com: ART of VIRTUE
- rollin96님의 노트-air/flex Tip
- w3school.com
- 굿네이버스
- 꿀뷰, 바닥, 술집의 개발자
- 나물이네-자취생들의 먹거리⋯
- 낙장불입 인생막장
- 내 눈으로 본 한국, 한국인....
- 딴동네-Air/Flex 영상 강좌
- 레인 에디터
- 류종택의 프로그래밍 강의실
- 리아 코리아
- 무료 호스팅 해줌 - 디지문
- 버터백통의 Action Script⋯
- 살아 숨 쉬는 웹 - 블루비
- 색깔있는 진보 칼라TV
- 시작하세요! iphone3
- 아이디어 상품
- 아폴로케이션[Adobe AIR]
- 엑셀 도움말
- 영원의 헤아림-검쉰-Flex
- 오픈소스 FLV 플레이어
- 울나라 Ajax Library
- 웹사이트 방문자 통계
- 웹카페-css 잘나왔뜸
- 웹캠으로하는 멋진 게임
- 웹프로그래머의 홈페이지 정⋯
- 윤훈남의 액션스크립트3.0
- 조인시 위키
- 체리필터의 인생이야기
- 충청투데이 알짜 뉴스
- 칸과칸사이
- 태우\'s log - web 2.0 and b⋯
- 파비콘 제네레이터
- 파인애플 밴드
- 팬소년이야기
- 한국의 대표 진보언론 민중의⋯
- 훈스닷컴
- Feeding.kr의 일용할양식
- [javascript]기억하고 싶은 것들
- XML-RPC-metaWeblog 설명
- [IT웹툰]미닉스의 작은 이야기들
- outsider 개발자
- 애매한 발음 알아볼때
- [android]Photographer. Andr⋯
- [android]mSurf Lab 안드로이⋯
- [android]안드로이드 개발 정보
- [android]안드로이드 개발하는놈
- [android]안드로이드 프로그⋯
- [android]참 쉽습니까?
- [android]커니의 안드로이드⋯
- [android]회색의 구글 안드로⋯
- 장군블로그 [진심을 담는 마⋯
- 백남중
- NARADESIGN:BLOG
- [php.js] php함수 js로 옮겨⋯
- javascript 이론적으로 설명⋯
- JavaScript Garden
- Angularjs 등 javascript 설명
- node.js
- 유용한 코드 많은 곳...코드⋯
- HTML5 Demos- 최고!!!
- Firejune - The Web is still⋯
- 글읽어주는 사이트
- [publisher] Clearboth
- [nodejs]Hello World!!
- angularjs2 - 강추
- 모든 브라우저에서 동작하는⋯
- Beautiful Jquery Plugin Mop⋯
- 김진형교수의 SW정책 단상
- Comments for 미스타표, 즐기⋯
- [외국개발자]곰같은블로그
- [opencv]다크 프로그래머
- [YouTube]日本人の知らない日⋯
- 영어학습 자료실 EnglishCube⋯
- がんばれ! 日本語
- [youtube]serina hwang
- 하라마~~~
- O HOUSE : 라이프 매거진
- 아름다운 하우스 : 네이버⋯
- [인테리어]김반장의 이중생활
- [리모델링]Pastel design & A⋯
- [리모델링]대전 아파트 인테⋯
- [리모델링]가람홈스토리
- :: Back to the Mac
- Swift 언어 개발문서
- [swift]Seorenn SIGSEGV
- Swift Lab를 위한 댓글
- 콩닥맘의 차니스토리 : 네이⋯
- 헬렌의 테이스팅 메뉴 The Ta⋯
- lovesera: ART of VIRTUE-정진호
- [ionic] saltfactory's blog
- PhoneGap API Documentation
- 김변의 법인등기 : 네이버 블⋯
- 면어의 얼렁뚱땅 캘리그라피
- 푸른지성과 카즈미, 그리고⋯
- AnimationKING
- AnimationKING : 네이버 블로그
- POND X P.B.Y
- 도쿄 동경 베쯔니 블로그
- whatdo.net-티티호스팅
TAG
- 대전역
- 충청투데이
- 아이폰
- html5예제
- 티눈
- 자양동
- AIR
- 안드로이드
- 자전거
- 재개발
- 넥서스원
- flex
- exif 정보
- 봄
- ogv
- php
- 겨울준비
- 해킨토시
- Alert.show
- html5
- Ajax
- 골목
- 고려극장
- 사마귀
- 공개
- localstorage
- 맥북에어 13
- 가오지구
- 쌍둥이빌딩
- jQuery