html5 (9) 썸네일형 리스트형 html5 비디오 코덱 지원 여부 스크립트 /* mpeg4 : canPlayType('video/mp4; codecs="mp4v.20.8"') h264 : canPlayType('video/mp4; codecs="avc1.42E01E"') webm : canPlayType('video/webm; codecs="vp8"') ogg : canPlayType('video/ogg; codecs="theora"') 리턴값이 probably, maybe -> 둘 중 하나면 지원한다 */ function supportsH264Ogg() {//h264 나 theora 지원여부 체크 var obj = document.querySelector("#video"); var ogg = obj.canPlayType('video/ogg; codecs="theora"'); .. [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+" "); }, mPos:function.. [html5 동영상] 인코딩 유틸 (ogg theora, H.264) html5의 video 태그는 ogg theora 와 h.264 코덱을 씁니다. 전자는 크롬과 파폭 모두에서 그리고 후자는 크롬, 사파리에서 플레이 되죠. 위 코덱으로 인코딩 하는 유틸을 찾으시분 있을까봐 링크 겁니다. 1. ogg theora download : http://www.theora.org/ http://www.v2v.cc/~j/ffmpeg2theora/download.html 사용법 : http://www.v2v.cc/~j/ffmpeg2theora/examples.html 간단히 사용법만 적겠습니다. 나머진 위 링크 참고. ffmpeg2theora.exe sample.wmv -> 저장위치 영상파일 : 무쟈게 간단합니다.ㅎ;; ffmpeg 은 한번쯤 들어 보셨을 만큼, 서버쪽에서도 인코딩하게.. [html5 sqlite] chrome의 괜찮은 sqlite db 관리툴 다운링크 : http://sourceforge.net/projects/sqlitebrowser/ 귀찮으면 이거 다운로드 : |별다른 설정없이 설치했다면... 1) winXP에서 크롬의 인덱스 sqlite 저장 위치 : C:\Documents and Settings\유저명\Local Settings\Application Data\Google\Chrome\User Data\Default\databases\Databases.db 2) winXP에서 크롬 sqlite 도메인별 db 저장위치 : C:\Documents and Settings\유저명\Local Settings\Application Data\Google\Chrome\User Data\Default\databases\도메인이름의폴더\~~ [html5 예제]web database sqlite 예제 : http://whatdo.net/html5/example/#5 API : http://dev.w3.org/html5/webdatabase/#sqltransaction 다른사이트 : http://html5doctor.com/introducing-web-sql-databases/ webkit 계 브라우저만 현재 지원합니다. (크롬, 사파리 등) - 2010.06.21 브라우저 내장 DB(sqlite) 를 이용하여 데이타를 저장할수 있는 공간이 있습니다. 브라우저 설정마다 다른데 safari의 경우 1~500MB 까지 설정할수 있게 되어 있네요. 보통 5MB정도라고 합니다. 거기다 transaction 까지 지원되고 sql 문을 그대로 쓸수 있으니 간단한 localStorage보다 사용빈도는 낮겠지만.. [html5-예제] canvas 에 글자쓰기 (그림자, 그라디언트등) 예제 : http://whatdo.net/html5/example/#2 html5 canvas 위에 글자쓰고 폰트 효과 주기. - color, stroke, size, face, weight, shadow effect, gradient effect - 결과물 보기, 결과물 다운로드.. - chrome 또는 safari 선호 (input type=range 태그 적용) [html5-예제] video play시 canvas에 복사하기.. 예제 : http://whatdo.net/html5/example/#1 플레이 버튼을 클릭.. canvas 생성후 거기에 플레이 되는 비디오를 카피한다. PC 사양이 낮으면 조심! (발코딩이라 이런거 저런거 안 따짐.. 예제는 예제일뿐...ㅎㅎ;;) [html5-예제] 멀티업로드 그리고 Canvas+Video +++ jquery 얼렁뚱땅 Demo : http://whatdo.net/html5/example/#0 - 파이어폭스 강추....(video 태그에서 ogv파일을 chrome,safari 지원못함) - 파일업로드시 멀티업로드와 drag&drop을 지원한다. - 업로드후 ogv(코덱명이 생각안남) 파일은 시간단위로 잘라 합치는 것처럼 보이게 함. (sample ogv 파일 다운로드후 테스트) - play 되는 canvas 위에 글자 입력. - local storage 로 업로드된 파일 목록 기억. 덧.2010.09.01 참고 사이트 : http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html 이전 1 2 다음
