요즈음, 많은 사람들이 스마트폰을 이용합니다. 이제 셀폰을 이용해 동영상을 보는 것은 너무나도 당연한 일입니다. 하지만, 그 당연한 일을 제공하기위해 많은 웹 프로그래머들이 고생을 합니다.
물론, 모바일 웹 프로그래밍에 대하여 경험이 많으신 분은 이미 아시는 내용이지만, 이제 막 모바일 웹프로그래밍을 접하신 분들에게 저의 경험을 통하여 도움을 드리고자 이 글을 만들어 보았습니다.
먼저, 많은 스마트폰 제조 업체가 있지만, 이제 WEB OS는 제외하고, 스마트폰에서 사용하는 OS는 iOS, Android , MS-Mobile7 정도가 아닐까 합니다. 각 OS에서 지원하는 동영상 파일의 형식에 관한, 자세한 내용은 아래의 링크를 참조하시고, 제 경험으로 H.264방식으로 코딩된 MP4파일을 추천합니다. 세개의 OS에서 모두 지원하고, 제가 동영상 인코딩/디코딩 전문가는 아니지만, 가장 만족하는 결과를 볼 수 있었던 것이H.264방식으로 코딩된 MP4파일 입니다.
- iPhone 지원 형식: http://www.apple.com/iphone/specs.html
- android 지원형식: http://developer.android.com/guide/appendix/media-formats.html
- Window 8 지원형식: https://msdn.microsoft.com/en-us/library/windows/apps/ff462087%28v=vs.105%29.aspx
두번째로는, 어떻게 웹사이트에 동영상을 연결할 것인지 생각해야만 합니다. 우선 많은 분들이 HTML 5의 < video> 태그에 관하여 궁금해 하실 것 입니다. 이 내용도 설명을 하자면 길어지지만, 우선 내용은 이렇습니다. 표준은 아래의 링크에서 보실 수 있지만, iPhone 의 경우는 표준을 적용하고 있어서, 예제의 스크립트 만으로 동작을 하지만, android 의 경우는 버전마다 지원하는 HTML 형식이 다르고, 비디오 파일 형식도 같지 않아서, 좀 머리가 아픈 부분입니다. Android 홈페이지에 의하면, 2.1.버전 부터 HTML5를 지원을 한다고 하지만, 개인적인 테스트 결과는 android 2.2. 버전 부터 제대로 된 결과를 얻을 수 있었습니다.
- HTML 5의 <video> 태그 http://www.w3schools.com/html/html5_video.asp
- Android의 HTML 5 지원: http://source.android.com/compatibility/android-2.1-cdd.pdf
결론을 말씀드리면, android의 경우에는 자바스크립트를 이용하여 play() 메서드(함수)를 호출해야만, 동영상이 실행 된다는 것을 기억하시고, 웹페이지를 구현해야 한다는 것입니다.
제가 사용하는 HTML 5 의 <video> 태그의 기본형태는 아래와 같습니다.
참고하시고, 도움이 되기를 바랍니다. ^^
[<video> 태그의 기본예제]