HTML5의 소개 및 지원되는 않는 브라우져에서의 사용법 (3 - Video)

저자 : Mark Pilgrim

HTML5는 브라우져에서 지원하는 <video>라는 새로운 태그를 선보였다. 내장된 Video는 QuickTime, Flash등
third-party plugin없이 사용이 가능하다.

또한 <video>태그는 스크립트의 사용없이도 사용할 수 있다. 다양한 Video Files을 사용할 수 있고, 브라우져들은
HTML5에서 <video>태그를 지원함으로써 자체에서 지원되어지는 video format들을 기본으로 선택할 수 있게 될 것이다.
다음에서 관련 내용들을 볼 수 있다.

part 1: 포함하고 있는 포맷 (http://diveintomark.org/archives/2008/12/18/give-part-1-container-formats)
part 2: video codec의 불필요 (http://diveintomark.org/archives/2008/12/19/give-part-2-lossy-video-codecs)

HTML5 <video>태그를 지원하지 않는 브라우져들은 <video>를 앞으로도 지원하지 않을 것 같다. 그러나 third-party plugin
대신에 기본적으로 제공하는 이점에 대해서 알려야한다.

Kroc Camen은 Video for Everybody!(http://camendesign.com/code/video_for_everybody)로 볼려지는
해결방법을 제시했다.
HTML5 <video>태그를 사용할 수 있다면 사용하고, 아니라면 QuickTime, flash등 third-party plugin으로 이전 브라우져와의
호환성을 해결했다.
이러한 해결 방법에서 Javascript를 사용하지 않았다. 또한 어떤 브라우져에서도 잘 실행되었다.(모바일브라우져를 포함하고 있다.)

이 방법 말고도 더 많은 해결방법을 얘기해보고자 한다.
<video>태그를 사용한 페이지에서 play와 같은 기능들보다 더 많은 기능을 사용하고 싶다면, Javascript를 사용하여야 한다.
현재 브라우져가 HTML5 <video>태그를 지원한다라면, DOM 객체는 <video>태그를 만들고 canPlayType() 함수를 가지고
있을 것이다.
지원하지 않는다라면 <video>태그를 생성하여, 모든 태그에서 쓰이는 일반적인 속성으로 설정할 수 있다.

function supports_video() {
  return !!document.createElement('video').canPlayType;
}

기능을 직접 작성하는 대신에 Modernizr로 <video> 태그를 지원받을 수 있다.

if (Modernizr.video) {
  // let's play some video!
} else {
  // no native video support available :(
  // maybe check for QuickTime® or Flash® instead
}

다음으로는 현재 브라우져에서 실행되어 질 수 있는 video format을 찾는 테스트를 해볼려고 한다.

원서 : http://diveintohtml5.org/detect.html