..

Search

<video>

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>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<video> 3.0 지원함 9.0 3.5 3.1 10.5

 

각 브라우저별로 현재 지원 중인 비디오 파일 포맷은 다음과 같습니다.

파일 포맷

미디어 타입(MIME)

chrome edge firefox safari opera
MP4 video/mp4 지원함 지원함 지원함 지원함 지원함
WebM video/webm 지원함

지원하지 않음

지원함 지원하지 않음 지원함
Ogg video/ogg 지원함 지원하지 않음 지원함 지원하지 않음 지원함

 


HTML5에서 변경된 사항

<video> 태그는 HTML5에서 새롭게 추가된 요소입니다.


사용할 수 있는 속성

속성명   속성값 설명

autoplay

 

autoplay

비디오가 실행될 준비가 끝나는 대로 자동으로 실행됨을 명시함.

controls

 

controls

플레이 버튼이나 정지 버튼과 같이 비디오의 실행을 제어할 수 있는 제어기가 표시됨을 명시함.

height

 

픽셀

비디오의 높이를 픽셀(pixel) 단위로 명시함.

loop

 

loop

비디오의 재생이 끝나면 자동으로 또다시 재생됨을 명시함.

muted

 

muted

비디오의 음성 출력이 음소거됨을 명시함.

poster

  URL

비디오를 다운로드하는 동안이나 사용자가 재생 버튼을 누를 때까지 표시할 이미지를 명시함.

preload

 

auto

metadata

none

페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부와 그 방법을 명시함.

src

 

URL

비디오 파일의 위치(URL)를 명시함.

width

 

픽셀

비디오의 너비를 픽셀(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;

};


연관 페이지

HTML 비디오 수업 ⇒


연습문제