컴터/html5 (16) 썸네일형 리스트형 [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-예제] web storage 중 local storage 예제 : http://whatdo.net/html5/example/#4 브라우저에 저장하는 기능으로 아주 많은 양은 아니더라도 부족하지 않을 만큼을 저장할수 있다. 정확히 얼마인지 기억이 가물가물... 이와 같은 사용법으로 sessionStorage 가 있는데, 말그대로 브라우저를 닫았다 다시 열번 전자는 계속 유지하고 있는 반면 후자는 삭제된다. localStorage는 임의로 지울때까지 계속 보유하고 있는다. cookie 로 어렵게 하지 말고, webstorage를 이용하면 편할듯. ---------------------소스(스크립트짜기 귀찮아서..ㅡㅡ;; + jquery)-------------------------------------------- var ls = window.localStorag.. [html5-예제] 메신저같은 알림창 (notifications) 예제 : http://whatdo.net/html5/example/#3 API : http://dev.w3.org/2006/webapi/WebNotifications/publish/#dfn-onclose 글이 오면 메신저처럼 PC화면 오른쪽에 알림창을 띄우는 기능입니다. 딱히 쓸데는 없지만, 쪽지 기능이나 웹 채팅 구현시 유용할듯 싶네요. 현재는 chrome에서만 올바르게 작동되니 꼭 chrome에서 보시길 권장합니다. 다른 브라우저에선 봐도 안나오니 ㅡ,.ㅡ // https://developer.mozilla.org/en-US/docs/Web/API/notificationfunction notificate(){var opt={title:"알림 테스트",body:"테스트 입니다. 안녕하세요",data:".. [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 다음
