Firejune

Kroc Camen씨는 비디오 요소를 사용함에 있어서 자바스크립트를 사용하지 않고 HTML 마크업만으로 크로스-브라우저에 대응하는 현실적인 방법을 제시했습니다. HTML5의 <video> 요소를 사용가능한 경우와 그렇지 않은 경우에는 QuickTime과 Flash 브라우저 플러그인을 이용하여 재생합니다. 테스트 페이지에 작성된 브라우저별 호환성 테이블을 보면 <video> 요소에 사용되는 미디어의 포맷이 브라우저별로 통일되어 있지 않기 때문에 MP4, OGG 두가지 포맷을 모두 준비해야하며, 하위 호환성을 위한 플래시 플래이어까지 갖추어야하는 노고가 뒤따릅니다. 위 예제는 아래와 같은 마크업으로 작성되어 있습니다.

<video width="640" height="360" poster="__POSTER__.JPG" controls>
  <source src="__VIDEO__.OGV" type="video/ogg" />
  <source src="__VIDEO__.MP4" type="video/mp4" />
  <!--[if gt IE 6]>
  <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
  [endif]-->
  <!--[if !IE]><!-->
  <object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4">
  <!--<![endif]-->
  <param name="src" value="__VIDEO__.MP4" />
  <param name="showlogo" value="false" />
  <object width="640" height="384" type="application/x-shockwave-flash"
    data="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4">
    <param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
    <img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__"/>
  </object><!--[if gt IE 6]><!-->
  </object><!--<![endif]-->
</video>

덧. 착한 구글 크롬은 OGG와 MP4를 모두 지원하는군요!