<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 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |