<video>
웹 문서에 동영상을 재생하는 미디어 플레이어입니다. 비디오의 너비와 정보를 지정하고 여러가지 속성을 지정할 수 있습니다. 비디오를 지원하는 파일은 mp4, webM, avi, ogg가 있으며, 브라우저마다 지원하는 파일이 다릅니다. 모든 브라우저의 호환성을 맞추기 위해서는 여러가지 파일을 동시에 사용하여야 합니다. <source> 태그를 사용하여 비디오 파일을 불러올 수 있습니다.
<video>
<video> 태그는 미디어 영상을 정의합니다.
| 특징 | 설명 |
|---|---|
| 요소 | 블록 요소(block Element) |
| 닫는 태그 | 닫는 태그 사용(<video> ~ </video>) |
| 버전 | HTML5 |
| 시각적 표현 | 동영상 표현 |
정의(Definition)
- <video> 태그는 미디어 영상을 재생합니다.
- <video> 태그는 <sourece> 태그와 같이 사용합니다.
비교(Compare)
- 동영상을 재생할 때에는 <video> 태그를 사용합니다.
- 외부 프로그램이나 플러그인을 삽입 할 때에는 <embed> 태그를 사용합니다.
속성(Property)
| 속성 | 값(예) | 설명 | 버전 |
|---|---|---|---|
| autoplay | autoplay | 동영상이 바로 재생됩니다. | - |
| buffered | buffered | 동영상이 버퍼링 시간을 읽을 수 있는 속성입니다. | - |
| controls | controls | 비디오 컨트롤이 표시되도록 설정됩니다. | - |
| height | height = "pixel" | 비디오의 높이 값을 설정합니다. | - |
| loop | loop | 비디오 재생이 끝나면 다시 시작하도록 설정합니다. | - |
| muted | muted | 비디오의 오디오 출력을 음소거로 설정합니다. | - |
| poster | poster = "URL" | 비디오를 다운하는 동안 또는 시작버튼을 누르기 전까지 이미지를 설정합니다. | - |
| preload | preload = "auto" preload = "metadata" preload = "none" |
페이지가 로드되고 비디오 로드 여부를 설정합니다. | - |
| src | src = "URL" | 비디오 파일의 경로를 설정합니다. | - |
| width | width = "pixel" | 비디오의 가로 값을 설정합니다. | - |
비디오 파일 포멧
| 포멧 | 설명 |
|---|---|
| MP4 | H.264 코덱을 사용하며 압축률이 좋고 화질도 좋은 포맷입니다. |
| avi | 마이크로소프트의 비디오 포맷이며, 많이 사용하고 있지만 오디오 코덱을 지원하고 있지 않습니다. |
| ogg | 오그 비디오인 테오라(Theora)와 오그 오디오인 보비스(Vorbis)에서 만든 공개 포맷입니다. |
| webM | 구글이 개발한 공개 포맷입니다. |
브라우저별 지원 포맷
비디오 포멧의 종류에 따라 실행하는데 각각의 코덱이 필요합니다. 원본비디오를 압축해서 동영상 파일로 집어넣은 것을 인코딩(encording), 영상을 보여주는 것을 디코딩(Decoding) 이라고 하며, 이 두가지를 처리하는 것을 비디오 코덱이라고 합니다.
| 크롬 | 파이어폭스 | 사파리 | 오페라 | 익스플로러 | |
|---|---|---|---|---|---|
| MP4 | 사용가능 | 사용안됨 | 사용가능 | 사용안됨 | 사용가능 |
| webM | 사용가능 | 사용가능 | 사용안됨 | 사용가능 | 사용안됨 |
| ogg | 사용가능 | 사용가능 | 사용안됨 | 사용가능 | 사용안됨 |
Sample1
결과
html
<video width="620" controls poster="이미지 경로">
<source src="비디오.mp4" type="video/mp4">
<source src="비디오 경로.ogv" type="video/ogg">
<source src="비디오 경로.avi" type="video/avi">
당신의 브라우저는 동영상을 지원하지 않습니다.
</video>
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <video> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| autoplay | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| controls | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| height | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| loop | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| muted | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| poster | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| preload | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| src | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| width | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
