<video>

정의 및 사용

이제까지는 웹 페이지에서 비디오를 보여주는 표준은 존재하지 않았고, 플래시 같은 플러그인(plug-in)을 통해 비디오를 보여주는것이 대부분이었지만 모든 브라우저들이 같은 플러그인을 가지고 있지 않아 불편한 점이 많았다.

HTML4에서는 <object>태그와 <embed>태그를 사용해야 했고, ActiveX컨트롤을 사용하기도 했지만 HTML5에서는 별도의 플러그인 없이 <video> 태그를 사용하여 웹에서 바로 비디오를 보여줄 수 있는 표준을 정의한다.

브라우저 지원

IE6  지원안함IE7  지원안함IE8  지원안함Chrome 지원Firefox 지원Opera 지원Safari 지원

IE를 제외한 모든 브라우저에서 지원(video태그를 지원한다고 해도 각 브라우저별로 어떤 코덱을 지원하는지도 주의해야 한다.)

구문

속성 값 설명
속성 설명
src 동영상 파일의 경로 지정
poster 동영상 대체 이미지 파일 경로 지정
preload 동영상이 백그라운드에서 다운로드되어 재생 단추를 눌렀을 때 재생
autoplay 동영상 자동 재생
loop 재생 반복 횟수 지정
controls 콘트롤 막대바 추가
width 동영상 화면의 너비 지정
height 동영상 화면의 높이 지정

예제

  • 기본적으로 video태그만 사용하여 코딩하지만, 현재 각 브라우저마다 지원 파일 형식과 코덱이 달라서 css3를 사용할 때 벤더 접두사(-moz-, -webkit-, -o-)를 사용하듯 video태그 안에 source태그를 사용해서 파일 형식과 코덱들을 모두 적어주어야 한다.

버그 및 이슈

  • 현재(2011.06) 어떤 코덱이 표준 코덱이 될 것인가에 대해 많은 이슈가 있고, H.264, 테오라, VP8 세 개의 코덱이 가장 유력하다.
  • H.264 : 가장 많이 쓰여지고 있는 코덱이지만 유료라는 이유로 표준에 맞지 않다는 의견이 많자 H.264의 특허권을 가지고 있는 MPEG포럼에서 HTML5 웹 표준의 용도로 사용할 경우만 무료로 허용 했다.
  • 테오라 : 공개(무료) 코덱이며 파이어폭스에서는 벌써 3.5 버전부터 플러그인 없이도 테오라 코덱 비디오가 재생 가능하다. 테오라 코덱을 사용하는 .ogv 동영상 파일 인코딩은 파이어폭스 브라우저에서 부가기능으로도 제공한다.
  • VP8 : 2010년 구글이 발표한 공개(무료) 코덱이며, 구글이 H.264와 함께 VP8을 지원하겠다고 하여 모질라, 오페라, MS IE9에서도 지원에 참여 했다.

브라우저별 지원 동영상 파일 형식과 코덱

비디오와 오디오를 압축해서 동영상 파일로 만들고(인코딩), 또 플레이어에 보여주고(디코딩)하는 것들을 코덱이라고 하며 동영상 파일은 이 두가지 코덱을 사용해 만들어진다.(2011.06)

브라우저별 비디오, 오디오 파일 형식과 지원 코덱
브라우저 동영상 파일형식 비디오 코덱 오디오 코덱
파이어폭스 .ogg
.webm
테오라
VP8
Vorbis
오페라 .ogg
.webm
테오라
VP8
Vorbis
크롬 .ogg
.mp4
.webm
테오라
H.264
VP8
Vorbis
ACC
사파리 .mp4 H.264 ACC
IE9 .mp4 H.264 ACC
모바일
(iphone,android)
.mp4 H.264 ACC

목록 으로

댓글