개요
HTML5 비디오는 HTML5 표준에 정의된 <video> 요소와 관련 API를 이용해 웹 페이지 내에서 별도의 플러그인 없이도 동영상 콘텐츠를 재생할 수 있게 하는 기술이다. 기존의 <object>, <embed> 혹은 플래시(Flash) 기반 솔루션에 비해 더 가볍고, 표준화된 마크업·스크립트 인터페이스를 제공함으로써 브라우저 간 호환성과 접근성을 크게 향상시킨다.
주요 구성 요소
| 요소 | 설명 |
|---|---|
<video> 요소 |
동영상 파일을 삽입하고 제어할 수 있는 기본 HTML 태그. src, srcset, type 등 속성을 통해 파일을 지정한다. |
<source> 요소 |
하나의 <video> 안에 여러 포맷(예: MP4, WebM, Ogg)을 제공하여 브라우저가 지원하는 형식을 자동 선택하도록 한다. |
| 미디어 컨트롤 | controls 속성을 추가하면 재생·일시정지·볼륨·시크바 등 기본 UI가 표시된다. 커스텀 UI는 JavaScript과 CSS로 구현 가능. |
| 미디어 속성 | autoplay, loop, muted, preload, poster 등 재생 동작과 초기 화면을 제어한다. |
| JavaScript API | play(), pause(), currentTime, duration, volume, readyState, ended 등 객체 메서드·프로퍼티를 이용해 상세 제어 및 이벤트(play, pause, ended, timeupdate 등) 핸들링이 가능하다. |
| 미디어 트랙 | <track> 요소를 통해 자막(captions), 설명(descriptions), 키워드(keywords), 챕터(chapters) 등을 다국어·접근성 있게 제공한다. |
지원되는 파일 포맷
| 포맷 | MIME Type | 주요 브라우저 지원 |
|---|---|---|
| MP4 (H.264/AVC + AAC) | video/mp4 |
Chrome, Edge, Safari, Firefox (버전 21+), Opera |
| WebM (VP8/VP9 + Vorbis/Opus) | video/webm |
Chrome, Firefox, Edge, Opera |
| Ogg (Theora + Vorbis) | video/ogg |
Firefox, Chrome (버전 31+), Opera |
| AV1 (AV1 + Opus) | video/mp4 (AV1 in MP4) 혹은 video/webm |
최신 Chrome, Edge, Firefox (버전 88+), Safari (버전 17+) |
주의: 포맷별 특허·라이선스 상황이 다르므로, 배포 목적에 따라 적절히 선택해야 한다.
브라우저 호환성
| 브라우저 | 지원 상태 (2024년 기준) |
|---|---|
| Google Chrome | 완전 지원 (모든 주요 속성·API) |
| Mozilla Firefox | 완전 지원 |
| Microsoft Edge (Chromium 기반) | 완전 지원 |
| Apple Safari | 완전 지원 (iOS 9+ / macOS 10.11+) |
| Opera | 완전 지원 |
| 모바일 브라우저 (Android WebView, Chrome for Android, Safari iOS) | 완전 지원 |
보안·프라이버시 고려 사항
- 콘텐츠 보안 정책(CSP) –
<video>소스에 대한media-src지시자를 명시해 외부 도메인에서 불러오는 동영상을 제한한다. - HTTPS – 대부분의 최신 브라우저는 혼합 콘텐츠(HTTP 동영상 + HTTPS 페이지)를 차단한다.
- DRM (디지털 저작권 관리) – Encrypted Media Extensions (EME)와 Widevine, PlayReady 등 DRM 시스템을 결합해 보호된 콘텐츠를 재생한다.
- 자동 재생 정책 – 대부분의 브라우저는 사용자 인터랙션 없이 무음이 아닌 동영상 자동 재생을 차단한다.
muted와autoplay를 함께 사용하면 자동 재생이 허용된다.
접근성(Accessibility)
- 자막·트랙 :
<track kind="captions">혹은subtitles를 제공해 청각 장애인에게 정보를 전달한다. - 스크린 리더 :
aria-label,aria-describedby등을 사용해 비디오의 목적을 명시한다. - 키보드 제어 : 기본 컨트롤은
Tab·Enter·Space등 키보드로 조작 가능하도록 설계돼 있다. 커스텀 UI를 만들 경우 동일한 접근성 원칙을 적용한다.
표준 문서 및 참고 자료
- W3C HTML5 Specification –
<video>요소와 Media Source Extensions(MSE)·Encrypted Media Extensions(EME) 정의. - WHATWG HTML Living Standard – 지속적으로 업데이트되는 최신 HTML5 스펙.
- MDN Web Docs – 브라우저 호환성 표, 속성·메서드 상세 설명.
- Web Platform Tests – 구현 테스트 스위트로, 주요 브라우저의 준수 여부를 검증한다.
활용 예시
<video id="myVideo" controls preload="metadata" poster="thumb.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="captions_ko.vtt" kind="captions" srclang="ko" label="한국어 자막">
Your browser does not support the video tag.
</video>
<script>
const vid = document.getElementById('myVideo');
// 재생 전 5초부터 시작
vid.currentTime = 5;
// 재생
vid.play();
</script>
결론
HTML5 비디오는 웹 표준 기반으로 동영상 재생을 구현하는 핵심 기술이며, 다양한 포맷·DRM·접근성 옵션을 제공한다. 표준화된 마크업과 풍부한 JavaScript API 덕분에 개발자는 플러그인 의존성을 없애고, 사용자 경험을 일관되게 유지하면서도 보안·프라이버시 요구사항을 충족시킬 수 있다.