[HTML 기초] video 태그의 개념과 속성 및 source 사용법

video 태그 🎥

video 태그는 웹 페이지에 영상을 삽입할 때 사용하는 태그입니다.

영상 파일을 직접 연결할 수도 있고,
source 태그를 사용하여 여러 파일을 함께 지정할 수도 있습니다.

주요 포인트 Top3

01. video 기본 사용법

video 태그 하나로 영상을 삽입할 수 있습니다.

<video src="video.mp4" controls></video>
<!-- controls를 사용하면 재생 UI 표시 -->

src에 영상 경로를 넣으면 영상이 출력되며,
controls 속성을 사용하면 재생 버튼이 표시됩니다.

02. video 주요 속성

video는 다양한 속성을 통해 동작을 제어할 수 있습니다.

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

controls는 재생 UI를 표시하며,
autoplay는 자동 재생, loop는 반복 재생,
muted는 소리를 제거하는 속성입니다.

03. source 태그 사용

source 태그를 사용하면 여러 영상 파일을 지정할 수 있습니다.

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

브라우저는 지원 가능한 파일 형식을 자동으로 선택하여 재생합니다.

04. 실제 사용 예시 🧩

video와 source를 함께 사용하는 구조입니다.

<video controls autoplay muted loop width="500">
  <!-- mp4 우선 -->
  <source src="video.mp4" type="video/mp4" />
 
  <!-- 대체 파일 -->
  <source src="video.webm" type="video/webm" />
</video>

영상은 자동으로 재생되며,
소리는 꺼진 상태로 반복됩니다.
브라우저가 지원하는 형식에 따라 적절한 영상이 선택됩니다.

GOYO.’s Tip 💡

• autoplay는 대부분 muted와 함께 사용해야 정상적으로 동작합니다
• poster 속성을 사용하면 썸네일 이미지를 설정할 수 있습니다

마무리 🎯

video 태그는 웹에서 영상을 삽입하는 기본 요소이며,
속성과 source를 함께 사용하면 다양한 환경에 대응할 수 있습니다.