| 제목 | html5용 비디오 인코딩, video 태그 사용시 주의할 점 | ||
|---|---|---|---|
| 글쓴이 | 변종원(웅파) | 작성시각 | 2010/12/28 18:38:00 |
|
|
|||
|
<!-- 아래 스크립트를 쓰지 않으면 안드로이드 웹브라우저에서 작동 안함 --> <script> function vidEvent() {
var videos = document.getElementsByTagName('video');
var vidCount = videos.length;
for(i=0;i<vidCount;i++) {
videos[i].addEventListener('click',bang,false);
}
}
function bang() { this.play(); } window.onload = vidEvent;
</script>
<video controls width="100%" poster="33.jpg">
<source src="kick.ogv"></source>
<source src="kick.mp4"></source>
</video>
mp4는 h.264+aac 로 인코딩
ogv는 avi mp4 converter 기본셋팅 사용
source 태그 뒷쪽에 type 태그를 쓰는 것이 좋으나 mp4에 type태그를 쓸 경우
안드로이드용 웹브라우저에서 정상 작동을 하지 않는다.
그리고 안드로이드용 웹브라우저에서는 poster 태그로 이미지를 주지 않으면
화면에 아무 것도 나타나지 않는다.
파이어폭스에서도 source 태그 뒤에 type 태그를 쓸 경우 제대로 영상이 나오지않고
화면에 X 표시가 나온다.
정식 규약은 다음과 같다.
<source src="kick.webm" type='video/webm; codecs="vp8, vorbis"'></source>
<source src="kick.ogv" type='video/ogv; codecs="theora, vorbis"'></source>
<source src="kick.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
그러나 파이어폭스, 안드로이드 웹브라우저에서 정상작동을 하지 않는다.
참고 페이지
테스트 완료 (정상작동)
웹 : 사파리, 크롬, 파이어폭스
모바일 : 아이폰3G, HTC 디자이어HD
|
|||
| 다음글 | 배터리 온라인 클랜 개설 (6) | ||
| 이전글 | ci로 맹들고 있는 게임이에요~ (9) | ||
|
무명의시인2
/
2010/12/29 08:25:52 /
추천
0
|
|
변종원(웅파)
/
2010/12/29 09:39:18 /
추천
0
무명의시인/ 네. 회사 프로젝트와 관련이 있어서요. ㅎㅎ
기사에서 qrcode 찍으면 기사에 대한 모바일웹으로 이동하여 상세영상을 보고 공유(트위터, 페이스북 등)할 수 있게 하려고 파일럿 프로그램한겁니다. 내용은 간단하지만 여러 인코더로 인코딩 해보고 여러 시간 걸려 도달한 결과입니다. ^^ |
|
무명의시인2
/
2010/12/29 11:00:54 /
추천
0
웅파 / 우와....대단하심!
|
위의 주소로 들어갔는데 수애니킥의 대한 기사가 뜨네요.