자유게시판

제목 html5용 비디오 인코딩, video 태그 사용시 주의할 점
글쓴이 변종원(웅파) 작성시각 2010/12/28 18:38:00
댓글 : 3 추천 : 0 스크랩 : 0 조회수 : 27447   RSS
<!-- 아래 스크립트를 쓰지 않으면 안드로이드 웹브라우저에서 작동 안함 -->
 <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
웅파 / 우와....대단하심!