HTML5 비디오
1. 개요
HTML5 비디오는 HTML5에서 웹 페이지에 비디오를 포함하기 위해 사용되는 <video> 요소를 의미한다. 이 요소는 WebM, MP4, Ogg 등 다양한 비디오 형식을 지원하며, "controls" 속성을 통해 재생을 제어하는 사용자 인터페이스를 제공하거나 자바스크립트를 사용하여 사용자 정의 인터페이스를 구현할 수 있다. 브라우저 간의 비디오 형식 지원 차이로 인해 여러 소스를 지정하여 대체 기능을 제공하며, MIME 유형과 코덱을 지정하여 브라우저가 파일을 다운로드하기 전에 디코딩 가능 여부를 결정하도록 돕는다. 비디오 코덱 논쟁은 개방형 코덱과 비개방형 코덱 간의 대립으로, HTML5 표준 제정 과정에서 중요한 논쟁거리였다. HTML5 비디오는 투명 비디오 및 디지털 권한 관리(DRM)와 같은 고급 기능을 지원하며, 플래시의 대안으로 주요 웹사이트에서 널리 사용되고 있다.
-
HTML -
Alt 속성
`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다. -
HTML -
폰트 패밀리 (HTML)
폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다. -
HTML5 -
구글 스위피
구글 스위피는 구글에서 개발한 웹 서비스로, SWF 파일을 JSON으로 직렬화한 후 자바스크립트를 통해 SVG로 변환하여 애니메이션을 구현하는 기술이었으나 2016년 7월 1일 서비스가 종료되었다. -
HTML5 -
웹 스토리지
웹 스토리지는 웹 브라우저에서 클라이언트 측에 데이터를 저장하는 API로, 쿠키와 유사하지만 더 큰 저장 용량을 제공하며 로컬 스토리지와 세션 스토리지로 구분된다.
2. <video> 요소
`
2.1. 기본 사용법
HTML5에서는 `<video>` 태그를 사용하여 비디오를 삽입할 수 있다. `src` 속성은 비디오 파일의 경로를 지정하며, `controls` 속성은 비디오 재생 컨트롤을 화면에 표시한다. 예를 들어 `<video src="movie.webm" controls>`와 같이 코드를 작성하면, 웹 페이지에 movie.webm 비디오를 삽입하고 재생 컨트롤을 표시할 수 있다. `poster` 속성을 추가하여 비디오 재생 전에 표시할 이미지를 지정할 수도 있다. `<video src="movie.webm" poster="movie.jpg" controls>`와 같이 작성하면, 비디오가 시작되기 전에는 movie.jpg 이미지가 표시된다.
2.1.1. HTML5 코드 예제
아래의 HTML5 코드는 WebM 비디오를 웹 페이지에 포함한다.
```html
```
"controls" 속성은 재생을 제어하기 위한 브라우저 자체의 사용자 인터페이스를 활성화한다. 또는 웹 디자이너가 사용자 정의 사용자 인터페이스를 만드는 데 사용할 수 있는 자바스크립트로 재생을 제어할 수 있다. 선택적인 "poster" 속성은 재생이 시작되기 전에 비디오 대신 표시할 이미지를 지정한다. 그 목적은 비디오를 대표하는 것이다.
다음은 HTML로 작성된 웹 페이지에 WebM 비디오를 삽입하는 예시이다.
```html
2.2. 다양한 속성
다음 HTML 코드 조각은 웹 페이지에 WebM 비디오를 삽입한다.
```html
```
"controls" 속성은 재생을 제어하기 위한 브라우저 자체의 사용자 인터페이스를 활성화한다. 웹 디자이너가 사용자 정의 사용자 인터페이스를 만드는 데 사용할 수 있는 자바스크립트로 재생을 제어할 수도 있다. 선택적인 "poster" 속성은 재생이 시작되기 전에 비디오 대신 표시할 이미지를 지정하며, 비디오를 대표하는 것이 목적이다.
2.3.1. 다중 소스 코드 예제
html
```
다음은 HTML로 작성된 웹 페이지에 WebM 비디오를 삽입하는 예시이다.
```html
```
브라우저 간에 비디오 형식 지원이 다르므로, 웹 페이지는 여러 형식으로 비디오를 제공할 수 있다. "video" 요소는 여러 소스를 지정하여 대체 기능을 지원한다. 여러 개의 <source> 요소를 사용하면 브라우저가 자동으로 다운로드할 파일을 선택한다. 또는, 자바스크립트의 `canPlayType()` 함수를 사용하여 동일한 기능을 수행할 수 있다. "type" 속성은 MIME 유형과 코덱 목록을 지정하여 브라우저가 파일을 다운로드하기 시작하지 않고도 디코딩할 수 있는지 여부를 결정하는 데 도움을 준다.
3. 지원 브라우저 및 코덱
현재 HTML5 초안 규격에는 브라우저가 어떤 동영상 포맷을 지원해야 하는지 명시되어 있지 않다. 따라서 브라우저들은 자유롭게 동영상 포맷을 지원할 수 있다. 하지만 모든 브라우저가 지원해야 하는 동영상 포맷을 최소한 하나는 명시하는 것이 바람직하며, 이상적인 동영상 포맷은 다음과 같은 조건을 만족해야 한다.
* 고효율 압축률과 고화질, 낮은 디코드 과정 사용
* 로열티 없음
* 소프트웨어 및 하드웨어 동영상 디코더 존재
초기에는 Ogg Theora가 특허 문제에서 자유로워 HTML5에서 추천하는 표준 동영상 포맷이었다. 그러나 2007년 12월 10일 HTML5 규격 업데이트에서 특정 포맷 언급이 삭제되었다.
HTML 비디오는 기술 표준, ISO 정의되었지만 소프트웨어 특허에 묶인 형식과 오픈 형식으로 양분되었다. Alliance for Open Media의 새로운 AV1 형식은 산업 표준, 로열티 프리, 오픈 소스를 목표로 하며 광범위한 업계 지원을 받고 있다.
모질라와 오페라는 Theora 및 WebM의 오픈 형식만 지원한다. 구글은 2011년에 HTML 비디오 태그에 대한 H.264 지원을 제거할 의사를 밝혔으나, 크로미움에서는 제거되었지만 10년이 지난 후에도 구글 크롬에서는 아직 제거되지 않았다.
H.264/MPEG-4 AVC는 널리 사용되지만 특허로 보호된다. H.264 사용자는 개별 특허 보유자 또는 MPEG LA (마이크로소프트(Microsoft) 및 애플(Apple)을 포함한 특허 보유자 그룹)로부터 라이선스를 받아야 한다(일부 인터넷 방송 비디오 사용 제외).
2013년 10월 30일, 시스코(Cisco)는 H.264 바이너리 모듈을 제공하고 특허 라이선스 비용을 지불하여, H.264를 특정 경우에 무료로 사용할 수 있도록 했다.
각 브라우저별 HTML5 비디오 지원 현황은 다음과 같다.
| 브라우저 | 운영 체제 | Theora (Ogg) | H.264 (MP4) | HEVC (MP4) | VP8 (WebM) | VP9 (WebM) | AV1 (WebM) |
|---|---|---|---|---|---|---|---|
| Android 브라우저 | Android | ||||||
| 크로미움 | Unix 계열 및 Windows | ||||||
| 구글 크롬 | Unix 계열, Android, macOS 및 Windows | ||||||
| Internet Explorer | Windows | rowspan="3" | rowspan="3" | rowspan="3" | |||
| Windows Phone | rowspan="2" | rowspan="2" | |||||
| Windows RT | |||||||
| Microsoft Edge | Unix 계열, macOS 및 Windows | ||||||
| Windows 10 (레거시 EdgeHTML) | |||||||
| Windows 10 Mobile | |||||||
| Konqueror | Unix 계열 및 Windows | colspan="6" | |||||
| 모질라 파이어폭스 | Windows 7 이상 | rowspan="7" | rowspan="7" | rowspan="7" | rowspan="7" | rowspan="3" | |
| Windows Vista | |||||||
| Windows XP 및 N 에디션 | |||||||
| Linux | 43.0 (FFmpeg를 통해) | ||||||
| Android | |||||||
| macOS | |||||||
| Firefox OS | |||||||
| 오페라 모바일 | Android, iOS, Symbian 및 Windows Mobile | rowspan="3" | |||||
| 오페라 | macOS, Windows | rowspan=2 | rowspan=2 | rowspan=2 | rowspan=2 | ||
| Linux | |||||||
| 사파리 | iOS | rowspan="2" | rowspan="2" | rowspan="2" | |||
| macOS | |||||||
| GNOME 웹 | Linux 및 BSD | colspan="6" |
3.1. 비디오 코덱 논쟁
HTML5 표준 제정 과정에서 비디오 코덱을 둘러싼 논쟁은 웹 기술의 개방성과 접근성 측면에서 중요한 의미를 가진다.
초기 HTML5 초안은 브라우저가 지원해야 할 동영상 포맷을 명시하지 않아 브라우저마다 지원하는 포맷이 달랐다. 이에 따라 웹 개발자들은 여러 형식으로 비디오를 제공해야 했고, 이는 사용자 경험에 부정적인 영향을 미쳤다.
HTML5 워킹 그룹은 모든 브라우저가 지원해야 할 이상적인 동영상 포맷의 조건을 다음과 같이 제시했다.
* 높은 압축률, 고화질, 낮은 디코딩 프로세서 사용량
* 로열티 없음
* 소프트웨어 및 하드웨어 비디오 디코더 존재
처음에는 Ogg Theora가 특허 문제에서 자유롭다는 이유로 HTML5의 추천 동영상 포맷이었다. 그러나 2007년 12월 10일 HTML5 규격 업데이트에서 특정 포맷 언급이 삭제되고, 상호 운용성을 위해 모든 브라우저가 동일한 코덱을 지원하는 것이 바람직하지만, 현재로서는 모든 플레이어를 만족시키는 코덱이 없다는 내용으로 변경되었다.
이후 HTML 비디오는 기술 표준, ISO 정의되었지만 소프트웨어 특허에 묶인 형식과 오픈 형식으로 양분되었다.
* [[테오라|Theora]]: 알려진 비자유 특허에 영향을 받지 않지만, 애플은 알려지지 않은 특허에 대한 우려를 표명했다.
* [[H.264/MPEG-4 AVC|H.264]]: 널리 사용되지만 특허로 보호되며, 사용자는 라이선스를 취득해야 한다. MPEG LA (특허 보유자 그룹)로부터 라이선스를 받거나 개별 특허 보유자에게 라이선스를 받아야 한다.(일부 인터넷 방송 비디오 사용 제외)
* [[VP8]] ([[WebM]]): 구글이 온투를 인수하면서 얻은 VP8 비디오 형식을 기반으로 하며, 로열티 프리 라이선스를 제공한다. 자유 소프트웨어 재단은 VP8의 개방을 환영했다.
* [[VP9]]: VP8의 후속으로 구글에 의해 출시되었으며, 역시 오픈 소스이고 로열티가 없다.
* [[AV1]]: Alliance for Open Media에서 개발한 새로운 형식으로, 산업 표준, 로열티 프리, 오픈 소스를 목표로 한다.
모질라와 오페라는 Theora 및 WebM과 같은 오픈 형식만 지원했지만, 구글은 2011년에 HTML 비디오 태그에 대한 H.264 지원을 제거할 의사를 밝혔다가 철회했다. 마이크로소프트나 애플은 H.264를 지지하며 Theora나 WebM을 지원하지 않는다.
2013년 3월 7일, 구글과 MPEG LA, LLC는 VP8에 "필수적일 수 있는" 기술에 대한 합의를 발표했다.
2013년 10월 30일, 시스코(Cisco)는 H.264 바이너리 모듈을 다운로드할 수 있도록 제공한다고 발표했다. 시스코는 해당 바이너리 모듈이 설치될 때 특허 라이선스 비용을 지불하여, H.264를 해당 특정 경우에 무료로 사용할 수 있도록 했다.
각 웹 브라우저별 비디오 포맷 지원 현황은 다음과 같다.
| 웹 브라우저 | 운영체제 | 최신 안정 버전 | 지원하는 포맷 | |||||
|---|---|---|---|---|---|---|---|---|
| Theora | H.264 (MP4) | HEVC (MP4) | VP8 (WebM) | VP9 (WebM) | AV1 (WebM) | |||
| 안드로이드 브라우저 | 안드로이드 | 4.4.4 | ? | |||||
| 크로미움 | 유닉스 계열, Windows | |||||||
| 구글 크롬 | 범용 | |||||||
| 인터넷 익스플로러 | Windows | 11.0 | rowspan="3" | rowspan="3" | rowspan="3" | |||
| Windows Phone | 11.0 | rowspan="2" | rowspan="2" | |||||
| Windows RT | 10.0 | |||||||
| Microsoft Edge | Windows 10 | rowspan="2" | rowspan="2" | rowspan="2" | rowspan="2" | ? | ||
| Windows 10 Mobile | ? | |||||||
| Konqueror | 범용 | colspan="6" Qt 4.5상의 Phonon이 지원하는 모든 포맷에 대응。DirectShow, QuickTime, GStreamer, xine을 포함한 Phonon 백엔드를 이용 가능。MPlayer 및 VLC를 백엔드로 하는 이용은 개발 중。 | ||||||
| 모질라 파이어폭스 | Windows 7 이후 | rowspan="7" | rowspan="7" | rowspan="7" | rowspan="7" | rowspan="7" | ||
| Windows Vista | ||||||||
| Windows XP | ||||||||
| Linux | ||||||||
| Android | ||||||||
| OS X | ||||||||
| Firefox OS | ||||||||
| 오페라 | 범용 | rowspan="2" | } | |||||
| 범용 | ||||||||
| 사파리 | iOS | rowspan="2" | rowspan="2" | rowspan="2" | ? | |||
| OS X | ? | |||||||
| Web | 유닉스 계열 | colspan="6" Webkit/GTK+GStreamer가 지원하는 모든 포맷에 대응。 |
결론적으로 HTML5 비디오 코덱 논쟁은 개방형 웹 표준과 특정 기업의 이익 사이의 갈등을 보여주는 사례이다. 이는 기술 발전과 개방성, 그리고 웹 접근성 향상에 중요한 영향을 미치는 문제이며, 앞으로도 지속적인 논의가 필요하다.
3.2. 주요 브라우저 지원 현황
| 브라우저 | 운영 체제 | Theora (Ogg) | H.264 (MP4) | HEVC (MP4) | VP8 (WebM) | VP9 (WebM) | AV1 (WebM) |
|---|---|---|---|---|---|---|---|
| Android 브라우저 | Android | ||||||
| 크로미움 | Unix 계열 및 Windows | ||||||
| 구글 크롬 | Unix 계열, Android, macOS 및 Windows | ||||||
| Internet Explorer | Windows | rowspan="3" | rowspan="3" | rowspan="3" | |||
| Windows Phone | rowspan="2" | rowspan="2" | |||||
| Windows RT | |||||||
| Microsoft Edge | Unix 계열, macOS 및 Windows | ||||||
| Windows 10 (레거시 EdgeHTML) | |||||||
| Windows 10 Mobile | |||||||
| Konqueror | Unix 계열 및 Windows | colspan="6" | |||||
| 모질라 파이어폭스 | Windows 7 이상 | rowspan="7" | rowspan="7" | rowspan="7" | rowspan="7" | rowspan="3" | |
| Windows Vista | |||||||
| Windows XP 및 N 에디션 | |||||||
| Linux | 43.0 (FFmpeg를 통해) | ||||||
| Android | |||||||
| macOS | |||||||
| Firefox OS | |||||||
| 오페라 모바일 | Android, iOS, Symbian 및 Windows Mobile | rowspan="3" | |||||
| 오페라 | macOS, Windows | rowspan=2 | rowspan=2 | rowspan=2 | rowspan=2 | ||
| Linux | |||||||
| 사파리 | iOS | rowspan="2" | rowspan="2" | rowspan="2" | |||
| macOS | |||||||
| GNOME 웹 | Linux 및 BSD | colspan="6" |
4. 고급 기능
다음 HTML 코드 조각은 웹 페이지에 WebM 비디오를 삽입하는 방법을 보여준다.
```html
```
`controls` 속성은 재생을 제어하기 위한 브라우저 자체의 사용자 인터페이스를 활성화한다. 또는 웹 디자이너가 자바스크립트로 재생을 제어하여 사용자 정의 인터페이스를 만들 수도 있다. 선택적인 `poster` 속성은 재생이 시작되기 전에 비디오 대신 표시할 이미지를 지정하며, 비디오를 대표하는 역할을 한다.
HTML은 EME를 통해 디지털 권한 관리(DRM, 콘텐츠 사용 제한)를 지원한다. DRM 추가는 사용자가 DRM에 의해 제한된 미디어를 사용할 수 있는 자유를 제한하고, 공정 사용이 사용자에게 법적으로 그렇게 할 권리를 부여하는 경우에도 마찬가지이기 때문에 논란의 여지가 있다. W3C가 EME를 승인한 주요 주장은 비디오 콘텐츠가 웹 브라우저가 아닌 플러그인과 앱으로 제공될 것이라는 점이었다. 2013년 넷플릭스는 Silverlight 플러그인(DRM 포함)을 사용하는 기존 제공 방식 외에 EME를 사용하여 HTML 비디오에 대한 지원을 추가했다.
4.1. 투명 비디오 (알파 채널)
투명 비디오는 알파 채널을 가지는 비디오로, 다음과 같은 여러 설계상의 장점을 갖는다.
* 배경색, 패턴, 모티프가 내장되어 있지 않아 웹 페이지에서 배경 및 인접 객체를 나중에 언제든지 변경할 수 있다. 이전에는 주변 환경에 맞게 비디오를 다시 생성해야 하는 덜 유연한 기술이 사용되었다.
* 투명 비디오를 텍스트, 그래픽, 다른 비디오, SVG나 캔버스와 같은 동적으로 렌더링된 콘텐츠와 매우 유연하게 결합하여 매우 동적인 레이어 효과를 얻을 수 있다.
* 반응형 웹 디자인 측면에서도 많은 가능성을 열어준다.
* 크롬은 2013년 7월 출시된 버전 31부터 WebM 컨테이너로 제공되는 알파 채널을 가진 VP8 및 VP9 인코딩된 비디오를 지원한다.
* 사파리는 iOS 13 (2019년 9월) 및 macOS 카탈리나 (2019년 10월)부터 MP4 컨테이너로 제공되는 알파 채널을 가진 HEVC 인코딩된 비디오를 지원한다.
* 일부 다른 독점적인 polyfill / 레거시 솔루션이 있으며, 이는 JavaScript 기반 비디오 플레이어로, SaaS 서버에 업로드된 비디오를 재생하며, 서버는 이를 독점 비디오 형식으로 변환한다.
* HTML5 이전에는 투명 비디오를 재생하는 유일한 방법은 어도비 플래시 플레이어를 사용하고 임베딩 코드에 `transparent` 플래그를 사용하는 것이었다.
4.2. 디지털 권한 관리 (DRM)
HTML은 EME를 통해 디지털 권한 관리(DRM, 콘텐츠 사용 제한)를 지원한다. DRM 추가는 사용자가 DRM에 의해 제한된 미디어를 사용할 수 있는 자유를 제한하고, 공정 사용이 사용자에게 법적으로 그렇게 할 권리를 부여하는 경우에도 마찬가지이기 때문에 논란의 여지가 있다. W3C가 EME를 승인한 주요 주장은 비디오 콘텐츠가 웹 브라우저가 아닌 플러그인과 앱으로 제공될 것이라는 점이었다.
2013년 넷플릭스는 Silverlight 플러그인(DRM 포함)을 사용하는 기존 제공 방식 외에 EME를 사용하여 HTML 비디오에 대한 지원을 추가했다.
5. HTML5 비디오의 활용
2010년 애플의 아이패드 출시와 스티브 잡스가 애플 모바일 기기에서 플래시를 지원하지 않겠다고 발표한 후, 많은 주요 사이트들이 아이패드로 식별되는 사용자 에이전트에게 어도비 플래시 대신 H.264 HTML 비디오를 제공하기 시작했다. 데일리모션(Ogg Theora 및 Vorbis 형식 사용), 유튜브(H.264 및 WebM 형식 사용), 비메오(H.264 형식 사용) 등에서 실험적인 HTML 기반 비디오 플레이어가 출시되었지만, HTML 비디오는 플래시 비디오만큼 널리 사용되지는 않았다.
HTML 비디오에 대한 지원은 꾸준히 증가하여, 2013년 6월 넷플릭스는 HTML 비디오에 대한 지원을 추가했다. 2015년 1월, 유튜브는 기본적으로 플래시 대신 HTML 비디오를 사용하도록 전환했다. 2015년 12월, 페이스북은 모든 비디오 콘텐츠에 플래시에서 HTML 비디오로 전환했다.
2016년 현재, 플래시는 데스크톱에서 여전히 널리 설치되어 있지만, 스마트폰과 같은 모바일 기기에서는 일반적으로 지원되지 않는다. 어도비를 포함하여 플래시 플러그인은 점진적으로 제거될 운명으로 여겨지고 있으며, 이는 HTML 비디오를 월드 와이드 웹에서 비디오를 재생하는 유일하게 널리 지원되는 방법으로 만들 것이다. 크롬, 파이어폭스, 사파리, 및 엣지는 2017년에 거의 모든 플래시 콘텐츠를 클릭해서 재생하도록 할 계획을 가지고 있었다. 플래시를 폐지할 계획을 발표하지 않은 유일한 주요 브라우저는 인터넷 익스플로러였다. 어도비는 2017년 7월 25일에 2020년에 플래시 개발을 영구적으로 종료할 것이라고 발표했다.