HTML5 비디오 형식의 개요
현재 HTML5 초안 규격은 브라우저가 <video> 태그에서 반드시 지원해야 하는 비디오 형식을 명확히 지정하고 있지 않습니다. 다만 실무에서 가장 널리 사용되는 비디오 형식은 다음과 같습니다.
1. Ogg 형식
Ogg 파일은 Thedora 비디오 코덱과 Vorbis 오디오 코덱을 함께 사용합니다. 오픈소스 기반의 무료 형식으로, 주로 Firefox나 Opera 같은 브라우저에서 잘 지원됩니다.
2. MPEG4 형식
MPEG4 파일은 H.264 비디오 코덱과 AAC 오디오 코덱을 사용합니다. 압축 효율이 뛰어나고 호환성이 우수하여 Chrome, Safari 등 대부분의 브라우저와 모바일 환경에서 폭넓게 활용됩니다.
참고로 최근에는 Google이 개발한 개방형 형식인 WebM(VP8/VP9 비디오 + Vorbis/Opus 오디오)도 HTML5 환경에서 널리 사용되고 있으니, 상황에 맞게 함께 고려하는 것이 좋습니다.
<source> 태그로 미디어 지정하기
<source> 태그를 사용하면 미디어 파일의 경로와 함께 미디어 타입(type) 등 다양한 속성을 지정할 수 있습니다.
비디오 요소 안에는 여러 개의 <source> 요소를 배치할 수 있으며, 이 경우 브라우저는 자신이 인식할 수 있는 첫 번째 형식을 자동으로 선택하여 재생합니다.
예제 코드
<!DOCTYPE HTML> <html> <body> <video width = "300" height = "200" controls autoplay> <source src = "/html5/foo.ogg" type = "video/ogg" /> <source src = "/html5/foo.mp4" type = "video/mp4" /> 사용 중인 브라우저는 video 요소를 지원하지 않습니다. </video> </body> </html>
위 예제에서 브라우저가 Ogg 형식을 지원하면 foo.ogg 파일을 재생하고, 지원하지 않으면 다음 순서인 MP4 파일을 재생합니다. 만약 두 형식 모두 지원하지 않는다면 <video> 태그 내부의 대체 텍스트가 화면에 표시됩니다.
정리
HTML5에서 비디오를 다룰 때는 단일 형식에 의존하기보다 Ogg와 MPEG4처럼 서로 다른 코덱을 사용하는 여러 소스를 함께 제공하는 것이 좋습니다. 이렇게 하면 다양한 브라우저와 기기에서도 안정적으로 동영상을 재생할 수 있습니다.