HTML5 멀티미디어 - 비디오

과거에는 웹 페이지에서 동영상을 재생하기 위해 플래시(Flash) 같은 외부 플러그인을 사용해야 했습니다. 하지만 HTML5가 도입되면서 <video> 태그를 이용해 표준화된 방식으로 웹사이트에 비디오를 삽입하고 재생할 수 있게 되었습니다.

이번 포스팅에서는 HTML5 비디오 요소의 사용법과 속성, 지원하는 파일 형식 등을 상세히 살펴보겠습니다.

1. HTML5 <video> 태그란?

<video> 태그는 HTML5에서 웹 브라우저 내에서 직접 비디오를 삽입하고 재생할 수 있도록 도와주는 요소입니다.

 

이전 방식(플러그인 의존)과 차이점

• 플러그인 없이 브라우저에서 직접 동영상 재생 가능
• 여러 형식의 비디오 파일을 지원하여 호환성 개선
• 다양한 속성을 활용해 사용자 경험 최적화 가능

2. HTML5 <video> 요소 기본 사용법

HTML5에서 비디오를 삽입하는 기본적인 방법은 아래와 같습니다.

<video style="width:576px; height:360px" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    사용 중인 브라우저가 비디오 태그를 지원하지 않습니다.
</video>

 

• <video> 태그 내부에 <source> 태그를 사용해 여러 파일 형식을 지정할 수 있습니다.
• 브라우저는 상단에 명시된 파일 형식부터 차례로 확인하여 지원되는 파일을 재생합니다.
• 지원하지 않는 브라우저에서는 사용 중인 브라우저가 비디오 태그를 지원하지 않습니다.라는 메시지가 표시됩니다.

3. HTML5 <video> 태그 주요 속성

HTML5에서는 비디오 요소를 제어할 수 있는 다양한 속성을 제공합니다.

속성	설명
src	비디오 파일의 경로를 지정합니다. <source> 태그 없이 사용할 수도 있습니다.
controls	재생/정지 버튼, 볼륨 조절 등의 기본 컨트롤 UI를 표시합니다.
autoplay	페이지가 로드될 때 자동으로 비디오를 재생합니다.
loop	비디오 재생이 끝나면 자동으로 다시 시작됩니다.
muted	비디오가 자동으로 음소거된 상태로 시작됩니다.
poster	비디오가 재생되기 전에 표시될 이미지를 지정합니다.
preload	페이지 로드 시 비디오를 미리 로드할지 여부를 설정합니다. (auto, metadata, none)
width	비디오 플레이어의 가로 크기를 지정합니다.
height	비디오 플레이어의 세로 크기를 지정합니다.

속성 예제

<video src="video.mp4" width="576" height="360" controls autoplay loop poster="thumbnail.jpg"></video>

 

이 코드에서는

• 비디오 크기를 576x360으로 설정
• 자동 재생(autoplay) 및 반복(loop) 설정
• 썸네일 이미지(poster) 적용
• 기본 컨트롤 UI 제공(controls)

4. 여러 개의 비디오 파일 제공하기

각 브라우저가 지원하는 비디오 형식이 다를 수 있기 때문에 <source> 태그를 활용해 여러 개의 파일 형식을 지정할 수 있습니다.

<video width="576" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    사용 중인 브라우저가 비디오 태그를 지원하지 않습니다.
</video>

 

브라우저는 위에서부터 차례로 파일을 확인하여, 지원하는 형식을 찾아 재생합니다.

 

 

5. 비디오에 자막 추가하기 (<track> 태그)

자막을 추가하고 싶다면 <track> 태그를 사용할 수 있습니다.

<video width="576" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="subtitles_ko.vtt" srclang="ko" label="Korean">
</video>

자막 태그 주요 속성

속성	설명
kind	자막의 종류 (subtitles, captions 등)
src	자막 파일(.vtt)의 경로
srclang	언어 코드 (en, ko 등)
label	사용자가 선택할 수 있도록 표시되는 이름

6. HTML5에서 지원하는 비디오 파일 형식

현재 HTML5에서 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 3가지입니다.

파일 형식	특징 및 설명
MP4	H.264 코덱을 사용하며, 고화질과 높은 압축률을 제공. 대부분의 브라우저와 호환됨
WebM	Google에서 개발한 오픈소스 형식. 높은 압축률과 빠른 로딩 속도를 제공
OGV	Theora 코덱을 사용하며, 오픈소스 포맷이지만 지원하는 브라우저가 적음

비디오 파일 확장자별 브라우저 호환성

형식	Chrome	Firefox	Edge	Safari	Opera
MP4	V	V	V	V	V
WebM	V	V	V	X	V
OGV	V	V		X	V

 

MP4가 가장 범용적인 형식이므로 기본적으로 MP4 파일을 제공하는 것이 좋습니다.

결론

HTML5 <video> 태그를 활용하면 웹사이트에 손쉽게 비디오를 삽입하고, 다양한 기능을 추가할 수 있습니다.

• 기본적인 <video> 태그 사용법 숙지
• 여러 개의 비디오 파일을 제공해 브라우저 호환성 확보
• 자막을 추가해 접근성 향상
• 자동 재생, 반복 재생 등의 속성을 활용해 사용자 경험 개선

앞으로 웹사이트에서 동영상을 추가할 때, HTML5 <video> 태그를 적극 활용해 보세요!