html5용 비디오 인코딩, video 태그 사용시 주의할 점

<!– 아래 스크립트를 쓰지 않으면 안드로이드 웹브라우저에서 작동 안함 –>
<스크립트>
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;
</스크립트>

<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 표시가 나온다.
 
정식 규약은 다음과 같다.
 

<video controls width=”100%” poster=”33.jpg”>
<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>
</video>