video 태그 사용법 & 예제 총정리

video 태그란?

video 태그는 HTML5에서 동영상을 재생하기 위해 사용되는 태그입니다. 브라우저는 video 태그를 지원하며, 이를 통해 사용자는 웹 페이지에서 동영상을 시청할 수 있습니다. video 태그는 다양한 속성과 함께 사용되며, 이를 활용하여 동영상의 특성과 재생 옵션을 지정할 수 있습니다.

video 태그의 구성 요소

video 태그는 여러 요소로 구성됩니다. 주요한 요소는 다음과 같습니다.

• src 속성: 동영상 파일의 경로를 지정합니다.
• controls 속성: 동영상 재생을 위한 컨트롤 버튼을 표시합니다.
• width/height 속성: 동영상의 가로/세로 크기를 지정합니다.
• autoplay 속성: 페이지가 로드되자마자 동영상 재생이 시작되도록 설정합니다.
• loop 속성: 동영상이 끝까지 재생되면 처음부터 다시 재생되도록 설정합니다.

video 태그 사용법 예제

1. 동영상 파일로부터 재생하기

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

2. 동영상 자동 재생하기

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

3. 반복 재생하기

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

4. 사이즈 지정하기

<video width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

5. 여러 개의 동영상 소스 제공하기

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

전체 내용 정리

video 태그는 HTML5에서 동영상을 재생하기 위해 사용되는 태그입니다. 주요 속성으로는 src, controls, width, height, autoplay, loop이 있으며, 이를 통해 동영상의 경로, 재생 옵션, 크기 등을 설정할 수 있습니다.

예제를 통해 video 태그의 사용법을 학습할 수 있습니다. 동영상 파일로부터 재생하거나, 자동 재생, 반복 재생, 사이즈 지정, 여러 개의 동영상 소스 제공 등 다양한 기능을 적용할 수 있습니다.

video 태그는 브라우저에서 널리 지원되므로, 웹 페이지에서 동영상을 원활하게 시청하고 제어할 수 있습니다.