HTML5 video 태그

이러닝 분야 뿐만 아니라 많은 웹 사이트들이 동영상을 제공하고 있습니다.
현재까지는 표준이 없어 플래시와 같은 플러그인을 통해 동영상을 보여줬는데요.
브라우저마다 플러그인 지원 여부가 달라 표준화가 필요했었습니다.

현재 HTML5에서는 이러한 동영상을 출력하기 위한 표준을 제공하고 있습니다.
HTML5의 <VIDEO>태그가 이에 해당하는데요.
video 태그에 대해 간략하게 정리하려고 합니다.

HTML5의 video 태그에서 지원하는 포맷은 Ogg, MPEG 4, WebM의 세가지 입니다.
Ogg는 Theora 비디오 코덱과 Vorbis 오디오 코덱을 포함한 컨테이너로 보통 ogg라는 확장자를 사용하는 동영상입니다.
MPEG 4는 잘 아는 대로 H.264 비디오 코덱과 AAC 오디오 코덱을 사용하고 있구요.
WebM은 VP8 비디오 코덱과 Vorbis 오디오 코덱을 사용하는 웹에서 활용하기 위해 만들어진 오픈소스 동영상 포맷입니다.

현재 각 브라우저별로 지원하는 동영상 포맷은 다음과 같습니다.

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	No	No	No	5.0+	3.0+
WebM	No	No	10.6+	6.0+	No

video 태그 활용

HTML5에서 동영상을 보여주기 위해서 다음과 같이 사용하면 됩니다.

<video src="movie.ogg" controls="controls"> </video>

src 속성으로 동영상 파일을 지정하고
control 속성을 통해서 "재생", "정지", "볼륨조절"과 같은 기능을 추가해 줍니다.

그런데 위와 같이 지정을 하면,
ogg 포맷을 지원하는 브라우저인 FireFox, Opera, Chrome에서만 동작하게 됩니다.
Safari 브라우저에서는 MPEG 4를 지원하므로 하나 이상의 동영상 src를 지정하고 싶을 수도 있습니다.
이런 경우, 다음과 같이 <source>를 여러 개 지정하게 되면 브라우저는 순서대로 체크해서 실행가능한 포맷일때 화면에 동영상을 보여주게 됩니다.

Example <video width="320" height="240" controls="controls">   <source src="movie.ogg" type="video/ogg" />   <source src="movie.mp4" type="video/mp4" />   <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> 테스트해보세요 »

IE 브라우저와 같이 지원하는 source가 없을 경우,
제일 하단에 있는 텍스트를 대신 보여주게 됩니다.
이런 경우는 플래시와 같은 플러그인을 사용하거나 window media player를 통해 동영상을 제공하는 형태로 구성하는 방법이 있을 겁니다.

초기에 모든 브라우저가 HTML5를 완벽하게 지원하지 않을 수 있으므로
HTML5를 사용할 때는 javascript로 직접 체크하거나 Modernizr와 같은 API를 활용해서 HTML5를 지원하는 경우와 지원하지 않는 경우로 나누어 처리해야 할 것 같네요.


<video> 태그 속성들
마지막으로 <video> 태그에서 사용할 수 있는 속성들에 대해 정리해 봅니다.

Attribute	Value	Description
audio	muted	Defining the default state of the the audio. Currently, only "muted" is allowed
autoplay	autoplay	If present, then the video will start playing as soon as it is ready
controls	controls	If present, controls will be displayed, such as a play button
height	pixels	Sets the height of the video player
loop	loop	If present, the video will start over again, every time it is finished
poster	url	Specifies the URL of an image representing the video
preload	preload	If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present
src	url	The URL of the video to play
width	pixels	Sets the width of the video player

이상으로 HTML5의 video 태그에 대해 정리해 봤습니다.
핵심 내용이나 예제는 http://www.w3schools.com/ 을 참조했네요..

그럼 즐거운 설 연휴 보내시기 바랍니다.

2011/01/20 - [프로그래밍] - HTML5에 추가된 요소들
2011/01/18 - [프로그래밍] - HTML5에 대하여