HTML <video> 요소란?
<video> 요소는 HTML5에서 도입된 태그로, 별도의 플러그인 없이 웹 페이지에 동영상을 직접 삽입할 수 있게 해줍니다. 다양한 속성을 조합하면 자동 재생, 반복 재생, 화면 크기 조절, 사용자 컨트롤 표시 여부 등을 세밀하게 제어할 수 있습니다.
<video> 요소의 주요 속성
아래 표는 <video> 요소에서 사용할 수 있는 주요 속성과 각각의 역할을 정리한 것입니다.
| 속성 | 설명 |
|---|---|
| autoplay | 불리언(boolean) 속성으로, 지정하면 데이터 로딩이 모두 끝나기를 기다리지 않고 재생이 가능한 시점에 즉시 동영상이 자동으로 재생됩니다. |
| autobuffer | 불리언 속성으로, 자동 재생(autoplay)이 설정되어 있지 않더라도 동영상 버퍼링을 미리 시작합니다. 참고로 이 속성은 HTML5에서 폐기(deprecated)되었으며, 대신 preload 속성을 사용하는 것이 권장됩니다. |
| controls | 이 속성이 있으면 사용자가 동영상 재생을 직접 제어할 수 있습니다. 음량 조절, 구간 이동(seek), 일시정지 및 재생 등의 컨트롤 UI가 화면에 표시됩니다. |
| height | 동영상 표시 영역의 높이를 CSS 픽셀 단위로 지정합니다. |
| loop | 불리언 속성으로, 지정하면 동영상이 끝까지 재생된 후 자동으로 처음으로 돌아가 반복 재생됩니다. |
| preload | 페이지가 로드될 때 동영상을 함께 불러와 바로 재생할 수 있도록 준비합니다. autoplay 속성이 지정되어 있으면 이 속성은 무시됩니다. none, metadata, auto 세 가지 값을 가질 수 있습니다. |
| poster | 사용자가 재생 버튼을 누르거나 구간을 탐색하기 전까지 화면에 표시될 포스터 이미지의 URL을 지정합니다. |
| src | 삽입할 동영상 파일의 URL을 지정합니다. 필수는 아니며, 대신 <video> 블록 안에 <source> 요소를 사용해 동영상을 지정할 수도 있습니다. |
| width | 동영상 표시 영역의 너비를 CSS 픽셀 단위로 지정합니다. |
사용 예시
다음은 <video> 요소의 주요 속성을 함께 사용한 기본적인 작성 예입니다.
<video src="movie.mp4" controls width="640" height="360" poster="thumbnail.jpg">
사용 중인 브라우저는 video 태그를 지원하지 않습니다.
</video>참고 사항
브라우저마다 지원하는 동영상 코덱(MP4, WebM, Ogg 등)이 다르므로, 호환성을 높이려면 <source> 요소를 여러 개 사용해 여러 형식의 파일을 함께 제공하는 것이 좋습니다. 또한 최신 표준에서는 autobuffer 대신 preload 속성을 사용해 버퍼링 동작을 제어하는 것이 바람직합니다.