[HTML5 연재] HTML5 비디오(Video)

웹에서의 비디오

현재에 이르기까지, 웹페이지 상에 비디오나 영화를 보여줄 수 있는 표준 기술은 없었습니다.
오늘날, 대부분의 비디오는 플러그인을 통해 보여지고 있습니다. (플래시와 같은 플러그인을 통해서 말이지요) 하지만, 경우에 따라선 다양한 이유로 해당 플러그인이 설치되어 있지 않을 수 있고 이 때문에 번거롭게 해당 플러그인을 설치하거나 혹은 비디오를 볼 수 없는 경우가 생기고 있습니다. 특히 플러그인이 동작되지 않는 운영체제나 모바일 기기에선 비디오를 완전히 볼 수 없는 불편함을 겪어야 하지요. 대표적인 예로는 플래시를 통해 재생되는 비디오를 볼 수 없는 아이폰과 아이패드가 있습니다.

플러그인에는 플래시 비디오만 있는것이 아니지요. 실버라이트에서 자바 애플릿에 이르기까지.. 플러그인의 종류는 상당히 다양합니다. 플러그인의 종류가 워낙 다양하다 보니 바로 보거나 즐길 수 없고, 일일이 설치하는 번거로움을 감수해야 하는 경우도 상당히 많습니다.

HTML5는 이러한 문제들을 해결하기 위해 웹페이지에 비디오나 영상을 삽입하는 표준적인 방법을 지정하는 새 요소를 정의 했습니다. 그것이 바로 이번글에서 소개할 <video> 요소입니다.

HTML5 Video, 어떻게 사용하는가

HTML5에서 영상을 보여 주려면, 아래와 같은 태그만 있으면 됩니다:

<video width="320" height="240" controls="controls">   
     <source src="movie.mp4" type="video/mp4" />   
     <source src="movie.ogg" type="video/ogg" />      현재 사용중인 웹브라우저가 비디오 태그를 지원하지 않습니다. </video> 

상단부의 비디오 태그는 웹브라우저에서 위 영상과 같은 모습으로 나타납니다. 이 중 controls 속성은 재생, 정지, 볼륨과 같은 비디오 조정 버튼을 추가합니다.

대부분의 경우 가로 길이(width)와 세로 길이(height)를 지정해 주는것이 좋습니다. 세로와 가로 길이가 지정될 경우, 페이지가 불러와 질때 비디오를 위해 필요한 공간이 미리 확보되게 됩니다. 하지만 가로와 세로 길이가 지정되지 않을 경우 웹브라우저가 영상의 길이를 알 수 없게 되기 때문에 적절한 공간을 할당하지 못하게 됩니다. 그 결과 웹페이지를 불러오고 비디오가 로딩되는 동안 비디오의 크기에 따라 페이지의 레이아웃이 변하거나 깨지는 증상이 발생하게 될수도 있습니다.

뿐만 아니라 <video> 태그를 지원하지 않는 IE 7, 8과 같은 웹브라우저를 위해 <video>와 </video> 태그 사이에 적절한 안내 문구를 넣어 주는것이 좋습니다.

<video> 요소는 여러개의 <source> 요소를 포함할 수 있습니다. <source> 태그로 다양한 포맷의 비디오 파일을 여러개 지정해 줄 수 있습니다. 웹브라우저는 자신이 표시할 수 있는 호환되는 비디오 형식을 골라 그 파일을 화면에 표시해줄 것입니다. 호환되는 파일이 여러개일 경우, 맨 처음 선언된 <source> 항목을 골라 화면에 표시해 줍니다.

비디오 포맷, 형식과 웹브라우저 지원 상황

현재, 공식적으로 <video> 요소가 지원하는 파일 형식은 크게 3가지 입니다:
MP4, WebM, Ogg

• MP4 = H.264 비디오 코덱과 AAC 오디오 코덱을 사용한 MPEG 4 파일
• WebM = VP8 비디오 코덱과 Vorbis 오디오 코덱을 사용한 WebM 파일
• Ogg = Theora 비디오 코덱과 Vorbis 오디오 코덱을 사용한 Ogg 파일

HTML5 Video 태그

태그	설명
<video>	비디오나 영상을 정의합니다.
<source>	<video>나 <audio>와 같은 미디어 요소에 대해 여러개의 미디어 자원을 정의할 수 있도록 합니다.
	<video>나 <audio> 요소에 대해 텍스트 형태의 트랙 정보나 자막을 지정해 줍니다.

<video> 태그 속성

속성	값	설명
autoplay	autoplay	로드가 끝나자 마자 바로 재생되게 할것인지 자동 재생 여부를 지정합니다.
controls	controls	비디오 관련 컨트롤이 표시되어야 할지를 지정합니다. (영상 관련 컨트롤에는 재생, 정지 버튼등이 있습니다)
height	픽셀 단위 숫자값	비디오 플레이어의 세로 크기를 지정합니다.
loop	loop	반복 재생 여부를 지정합니다.
muted	muted	영상 재생 시 소리가 재생되지 않도록 지정합니다.
poster	주소	비디오가 다운로드 중일때나, 혹은 사용자가 '재생' 버튼을 누르기 전까지 화면에 표시할 대표 이미지를 지정해 줍니다.
preload	auto metadata none	동영상이 재생되기 전 파일을 미리 다운로드 해야 할지 그 여부를 지정합니다. auto: 자동으로 다운로드 none: 사용자가 컨트롤을 조작하기 전까지 다운로드 금지 metadata: 비디오에 대한 부가 정보인 메타 데이터만 가져옴. 사용자가 컨트롤을 조작하면 실제 비디오 부분을 다운로드 하도록 함.
src	주소	비디오 파일의 주소(URL)을 지정해 줍니다.
width	픽셀 단위 숫자값	비디오 플레이어의 가로 크기를 지정합니다.

<source> 태그 속성

속성	값	설명
media	media_query	미디어 자원의 타입을 지정합니다.
src	주소	미디어 파일의 주소(URL)을 지정합니다.
type	마임 타입(MIME type)	미디어 자원의 마임 타입(MIME Type)을 지정합니다.

다음글에선 자바스크립트를 사용한 <video> 요소의 제어에 대해 다뤄보도록 하겠습니다. ^^