컴터 (225) 썸네일형 리스트형 [html5] 안드로이드 브라우저에서 video 태그 사용하기 동영상 모바일 웹페이지 작업을 하고 있었습니다. html5는 video 태그를 사용해 별도의 플러그인 없이 영상을 재생하는데, 아이폰의 safari나 기타 IE를 제외한 많은 브라우저가 이것을 지원합니다. 여러 테스트중 안드로이드 브라우저에서는 video 태그가 되긴 하지만 플레이가 나오지 않더군요. http://html5test.com/ 사이트에서 브라우저 테스트해도 video 태그는 지원하지만, h264나 theora 영상의 플레이는 "X" 표시가 되어 있더군요. 그래서 안되는구나 하고 포기했고, 어차피 넥원일 경우 플래시가 되니 플래시로 플레이 되게 작업 해놓았습니다. 그런데 어제 버스에서 듣기만하는 트위터에서 http://twitter.com/xguru 이분의 한마디에 가능한걸 알아죠. 결론은 넥.. iPad(아이패드) 사파리 코딩시 QUOTA_EXCEEDED_ERR 에러 날때. http://stackoverflow.com/questions/2603682/is-anyone-else-receiving-a-quota-exceeded-err-on-their-ipad-when-accessing-locals function setkey(key, val){ sessionStorage.removeItem(key); //먼저해주어야... sessionStorege.setItem(key, val); } //->localStorage 도 같은 오류 뱉음. //iphone 은 이런 증상 없고, pc 사파리도 이런 증상 없음.. 유독..아이패드ㅋ ... 2015.08.06 메모 (http://unikys.tistory.com/341)IOS8 기준으로 개인정보 보호가 된 브라우징탭에선 webStorag.. 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-예제] web storage 중 local storage 예제 : http://whatdo.net/html5/example/#4 브라우저에 저장하는 기능으로 아주 많은 양은 아니더라도 부족하지 않을 만큼을 저장할수 있다. 정확히 얼마인지 기억이 가물가물... 이와 같은 사용법으로 sessionStorage 가 있는데, 말그대로 브라우저를 닫았다 다시 열번 전자는 계속 유지하고 있는 반면 후자는 삭제된다. localStorage는 임의로 지울때까지 계속 보유하고 있는다. cookie 로 어렵게 하지 말고, webstorage를 이용하면 편할듯. ---------------------소스(스크립트짜기 귀찮아서..ㅡㅡ;; + jquery)-------------------------------------------- var ls = window.localStorag.. 이전 1 2 3 4 5 6 ··· 29 다음
