과거에는 웹 페이지에서 동영상을 재생하기 위해 플래시(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> 태그를 적극 활용해 보세요!
'Web > html' 카테고리의 다른 글
HTML5 멀티미디어 - 오디오 (0) | 2025.02.06 |
---|---|
HTML5 멀티미디어 - 멀티미디어 파일 형식 (1) | 2025.02.05 |
HTML5 요소 - Input 요소의 속성 (0) | 2025.02.05 |
HTML5 요소 - Input 요소의 타입 (1) | 2025.02.04 |
HTML5 요소 - Input 요소 (3) | 2025.02.04 |