모바일 사이트에서 video 태그 사용하기

요즈음, 많은 사람들이 스마트폰을 이용합니다. 이제 셀폰을 이용해 동영상을 보는 것은 너무나도 당연한 일입니다. 하지만, 그 당연한 일을 제공하기위해 많은 웹 프로그래머들이 고생을 합니다.

물론,  모바일 웹 프로그래밍에 대하여 경험이 많으신 분은 이미 아시는 내용이지만, 이제 막 모바일 웹프로그래밍을  접하신 분들에게 저의 경험을 통하여 도움을 드리고자 이 글을 만들어 보았습니다.

먼저,  많은 스마트폰 제조 업체가 있지만, 이제 WEB OS는 제외하고, 스마트폰에서 사용하는 OS는 iOS, Android , MS-Mobile7 정도가 아닐까 합니다. 각 OS에서 지원하는 동영상 파일의 형식에 관한, 자세한 내용은 아래의 링크를 참조하시고, 제 경험으로 H.264방식으로 코딩된 MP4파일을 추천합니다. 세개의 OS에서 모두 지원하고, 제가 동영상 인코딩/디코딩 전문가는 아니지만,  가장 만족하는 결과를 볼 수 있었던 것이H.264방식으로 코딩된 MP4파일 입니다.

두번째로는, 어떻게 웹사이트에 동영상을 연결할 것인지 생각해야만 합니다. 우선 많은 분들이 HTML 5의 < video> 태그에 관하여 궁금해 하실 것 입니다.  이 내용도 설명을 하자면 길어지지만, 우선 내용은 이렇습니다.   표준은 아래의 링크에서 보실 수 있지만, iPhone 의 경우는 표준을 적용하고 있어서, 예제의 스크립트 만으로 동작을 하지만, android 의 경우는 버전마다 지원하는  HTML 형식이 다르고, 비디오 파일 형식도 같지 않아서, 좀 머리가 아픈 부분입니다. Android 홈페이지에 의하면, 2.1.버전 부터 HTML5를 지원을 한다고 하지만,  개인적인 테스트 결과는 android  2.2. 버전 부터 제대로 된 결과를 얻을 수 있었습니다.

결론을  말씀드리면,  android의 경우에는 자바스크립트를 이용하여 play() 메서드(함수)를 호출해야만, 동영상이 실행 된다는 것을 기억하시고, 웹페이지를 구현해야 한다는 것입니다.

제가 사용하는 HTML 5 의 <video> 태그의 기본형태는 아래와 같습니다.

참고하시고, 도움이 되기를 바랍니다. ^^

 [<video> 태그의 기본예제]