HTML <video> 태그
정의 및 특징
<video> 태그는 무비 클립(movie clip)이나 비디오 스트림(video stream)과 같은 비디오를 정의할 때 사용합니다.
<video> 요소 내에 위치하는 텍스트는 사용자의 브라우저가 <video> 요소를 지원하지 않을 경우 화면에 표시됩니다.
<video> 요소는 현재 다음 세 가지 포맷의 파일을 지원하고 있습니다.
- MP4 (MIME 타입: video/mp4)
- WebM (MIME 타입: video/webm)
- Ogg (MIME 타입: video/ogg)
예제
<video height="180" width="288" controls>
<source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
<source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
지원하는 브라우저 및 버전
| 태그명 |
|
|
|
|
|
|
|---|---|---|---|---|---|---|
| <video> | 3.0 | 지원함 | 9.0 | 3.5 | 3.1 | 10.5 |
각 브라우저별로 현재 지원 중인 비디오 파일 포맷은 다음과 같습니다.
| 파일 포맷 |
미디어 타입(MIME) |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| MP4 | video/mp4 | 지원함 | 지원함 | 지원함 | 지원함 | 지원함 |
| WebM | video/webm | 지원함 |
지원하지 않음 |
지원함 | 지원하지 않음 | 지원함 |
| Ogg | video/ogg | 지원함 | 지원하지 않음 | 지원함 | 지원하지 않음 | 지원함 |
HTML5에서 변경된 사항
<video> 태그는 HTML5에서 새롭게 추가된 요소입니다.
사용할 수 있는 속성
| 속성명 | 속성값 | 설명 | |
|---|---|---|---|
|
autoplay |
비디오가 실행될 준비가 끝나는 대로 자동으로 실행됨을 명시함. |
||
|
|
controls |
플레이 버튼이나 정지 버튼과 같이 비디오의 실행을 제어할 수 있는 제어기가 표시됨을 명시함. |
|
|
픽셀 |
비디오의 높이를 픽셀(pixel) 단위로 명시함. |
||
|
|
loop |
비디오의 재생이 끝나면 자동으로 또다시 재생됨을 명시함. |
|
|
|
muted |
비디오의 음성 출력이 음소거됨을 명시함. |
|
| URL |
비디오를 다운로드하는 동안이나 사용자가 재생 버튼을 누를 때까지 표시할 이미지를 명시함. |
||
|
|
auto metadata none |
페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부와 그 방법을 명시함. |
|
|
|
URL |
비디오 파일의 위치(URL)를 명시함. |
|
|
픽셀 |
비디오의 너비를 픽셀(pixel) 단위로 명시함. |
DOM 인터페이스
|
interface HTMLVideoElement : HTMLMediaElement { attribute unsigned long width; attribute unsigned long height; readonly attribute unsigned long videoWidth; readonly attribute unsigned long videoHeight; attribute DOMString poster; }; |
