[HTML 기초] HTML 비디오 태그 (video)

HTML 비디오 태그 (video)

HTML에서는 웹페이지에 동영상을 삽입할 때
video 태그를 사용합니다.

HTML5부터는 별도의 플러그인 없이
브라우저에서 바로 동영상을 재생할 수 있습니다.

video 태그는 닫는 태그가 있는 요소이며
브라우저가 video 태그를 지원하지 않을 경우
대체 텍스트를 작성할 수도 있습니다.

주요 포인트 Top3

01. video 태그

video 태그는 웹페이지에 동영상을 삽입하는 태그입니다.

예)

<video></video>

예시)

<video src="video.mp4"></video>

video 태그는 닫는 태그가 존재하며
브라우저가 video 태그를 지원하지 않을 경우
대체 텍스트를 작성할 수 있습니다.

예시)

<video src="video.mp4">
  Your browser does not support the video tag.
</video>

02. video 주요 속성

controls

동영상 플레이어 컨트롤을 표시합니다.

예)

<video src="video.mp4" controls></video>

재생 버튼, 볼륨, 전체화면 등의
플레이어 UI가 표시됩니다.

autoplay

페이지가 열리면 자동으로 재생됩니다.

예)

<video src="video.mp4" autoplay></video>

하지만 대부분의 브라우저에서는
muted 속성과 함께 사용해야 자동 재생이 동작합니다.

muted

동영상을 음소거 상태로 재생합니다.

예)

<video src="video.mp4" muted></video>

loop

동영상이 끝나면 자동으로 반복 재생됩니다.

예)

<video src="video.mp4" loop></video>

width / height

동영상의 크기를 지정합니다.

예)

<video src="video.mp4" width="400"></video>

poster

동영상이 재생되기 전
썸네일 이미지를 표시하는 속성입니다.

예)

<video src="video.mp4" poster="thumbnail.jpg"></video>

preload

동영상을 미리 로드하는 방식을 지정합니다.

auto → 전체 영상 로드
metadata → 영상 정보만 로드
none → 로드하지 않음

예)

<video src="video.mp4" preload="metadata"></video>

03. source 태그

video 태그 안에서
여러 영상 형식을 지원하기 위해 사용합니다.

예)

<video>
</video>

예시)

<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

웹에서 주로 사용하는 영상 형식은 다음과 같습니다.

mp4
webm
ogg

이렇게 여러 형식을 넣으면
브라우저가 지원하는 파일을 선택해 재생합니다.

GOYO.’s Tip

autoplay 속성은 대부분의 브라우저에서
muted 속성과 함께 사용해야 정상적으로 동작합니다.

예시)

<video src="video.mp4" autoplay muted></video>

또한 실제 웹사이트에서는
video + source 구조를 함께 사용하는 경우가 많습니다.

마무리

이번 글에서는 HTML에서 동영상을 삽입할 때 사용하는
video 태그와 주요 속성을 정리했습니다.

video 태그를 활용하면
웹페이지에서 다양한 영상 콘텐츠를 쉽게 사용할 수 있습니다.