[html5] 안드로이드 브라우저에서 video 태그 사용하기

동영상 모바일 웹페이지 작업을 하고 있었습니다. 

html5는 video 태그를 사용해 별도의 플러그인 없이 영상을 재생하는데, 아이폰의 safari나 기타 IE를 제외한 많은 브라우저가 이것을 지원합니다.

여러 테스트중 안드로이드 브라우저에서는 video 태그가 되긴 하지만 플레이가 나오지 않더군요.

http://html5test.com/ 사이트에서 브라우저 테스트해도 video 태그는 지원하지만, h264나 theora 영상의 플레이는 "X" 표시가 되어 있더군요.

그래서 안되는구나 하고 포기했고, 어차피 넥원일 경우 플래시가 되니 플래시로 플레이 되게 작업 해놓았습니다.

그런데 어제 버스에서 듣기만하는 트위터에서 http://twitter.com/xguru 이분의 한마디에 가능한걸 알아죠.

결론은 넥원 그리니까 안드로이드 브라우저에서도 된다는 것입니다.

h264 코덱 영상은 되지만, theora 영상은 안됩니다. webm은 테스트 안해보았습니다.

작업결과 만족스럽게 되더군요..ㅋ 

요기부터 중요:::

"안드로이드 웹 브라우저에서 HTML5 video 제대로 실행하기. source 의 type 을 지정하면 안됨. play 는 꼭 자바스크립트에서 호출해야함 http://j.mp/9Fbn8A"

관련링크 : http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/

중요코드

<video id="video" autobuffer height="240" width="360"> <source src="BigBuck.m4v"> <source src="BigBuck.webm" type="video/webm"> <source src="BigBuck.theora.ogv" type="video/ogg"> </video>

var video = document.getElementById('video');
video.addEventListener('click',function(){
  document.play();
},false);