저자 : Mark Pilgrim
Video format은 언어로 쓰는 것과 같다. 영어신문과 스페인 신문은 같은 정보를 전달하지만, 당신이 영어만 읽을 수 있다면
여러 언어의 신문중 영어신문만 읽을 수 있을 것이다. video를 play하기 위하여 브라우져들은 언어(video로 쓰여진)를 이해하는 것이 필수적이다.
위에서 언어라고 말한것은 video에서는 codec으로 불리어 진다. vidoe의 stream을 해석하기 위한 알고리즘을 사용한다.
불행하게도 HTML5 Video Tag에서는 코덱을 사용할 수 없다. 브라우져들은 두개정도의 동영상을 볼 수 있게 제공한다.
(라이센스 비용 때문이다.)
HTML5의 Video태그는 safari와 iphone에서는 잘동작한다.(Adobe Flash도 지원한다. 이것에 대한 해결 방법은 Video for Everybody! - http://camendesign.com/code/video_for_everybody 여기서 확인하면 된다.)
또 Chromium(http://code.google.com/intl/ko/chromium/)과 Mozilla Firefox(http://www.mozilla.or.kr/ko/)와 같은
오픈 소스 브라우져도 동작한다.
브라우져가 HTML5 Video를 지원한다면 DOM 객체는 <video>태그의 canPlayTYpe() method를 사용할 수 있다.
이 method는 브라우져에서 지원하는 video format에 대해서 확인해준다.
또, 이 기능은 Macs과 iPhones에서 지원하는 포맷을 확인 시켜준다.
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
supports_video()함수의 사용은 이전 내용에서 다루고 있다. 브라우져가 HTML5 video를 지원하지 않는다면 어떠한 video format도 볼 수 없다.
if (!supports_video()) { return false; }
그리고 이 함수는 비어있는 video태그를 생성해주고(이 기능은 페이지에서 확인할 수도, 볼 수 도 없다.),
canPlayType() method를 호출한다.
이 method는 supports_video()함수로 존재여부를 체크해주기 때문에 video태그의 존재여부를 보장해준다.
var v = document.createElement("video");
"video format"은 여러종류의 일을 수행하는 조합이다. 기술적으로 보면 video태그가 H.264 Baseline video와 MPEG-4의
AAC LC audio를 실행할 수 있는지 아닌지를 확인할 수 있다.
(다음의 글을 읽으면 이런 비디오 종류에 대한 것을 이해할 수 있다. - http://diveintomark.org/tag/give)
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
canPlayType()함수는 Boolean값을 return하지 않는다. 복잡한 video format과 관련된 string값을 return 시켜 준다.
"probably" 브라우져가 현재 format을 실행시킬 수 있다는 확신이 있다면
"maybe" 브라우져가 현재 format을 실행시킬 수 있다는 판단이 되면
""(비어있는 값)브라우져가 현재 format을 실행시킬 수 없을때
여기서 설명하는 함수는 Mozilla Firefox 또는 다른 open source 브라우져들이 video format을 지원하는지를 확인한다.
위의 내용과 다른 이 함수의 차이점은 canPlayType()함수가 string값을 던져주는 것이다. 기술적으로 얘기하면
브라우져가 Theora video와 Vorbis audio(ogg)를 실행할 수 있는지 아닌지를 요청한다.
function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}
Modernizr에서는 각각의 video format을 확인해줄 수 없다. 그렇기 때문에 video태그를 사용할때 여기에 적혀진 함수를
사용해야 할 것이다.
최근 덧글