HTML5에서 도입된 <audio> 태그와 <video> 태그를 활용하면 별도의 플러그인 설치 없이도 웹사이트에 오디오와 동영상을 간편하게 삽입할 수 있습니다. 기본적인 사용법은 매우 단순합니다. src 속성으로 미디어 파일의 경로를 지정하고, controls 속성을 추가하면 사용자가 재생·일시정지 등을 조작할 수 있는 컨트롤 바가 화면에 표시됩니다.
<video> 태그의 주요 속성
HTML5의 video 태그는 플레이어의 모양새와 세부 동작을 제어할 수 있는 다양한 속성을 제공합니다. 아래 표에서 각 속성의 역할을 확인해 보세요.
| 번호 | 속성 및 설명 |
|---|---|
| 1 | autoplay 불리언(boolean) 속성입니다. 이 속성이 지정되면 데이터 로딩이 끝날 때까지 기다리지 않고, 재생이 가능한 시점이 되는 즉시 영상이 자동으로 재생됩니다. |
| 2 | autobuffer 불리언 속성입니다. 자동 재생(autoplay)이 설정되어 있지 않더라도 영상 버퍼링이 자동으로 시작됩니다. 참고: 현재 HTML 표준에서는 이 속성이 폐기(deprecated)되었으며, preload 속성으로 대체되었습니다. |
| 3 | controls 이 속성이 지정되면 사용자가 볼륨 조절, 구간 이동(탐색), 일시정지/재생 등 영상 재생을 직접 제어할 수 있습니다. |
| 4 | height 영상이 표시되는 영역의 높이를 CSS 픽셀 단위로 지정합니다. |
| 5 | loop 불리언 속성입니다. 영상 재생이 끝나면 자동으로 처음 위치로 되돌아가 반복 재생됩니다. |
| 6 | preload 페이지가 로드되는 시점에 영상을 미리 불러와 곧바로 재생할 수 있도록 준비합니다. autoplay 속성이 함께 지정된 경우에는 이 속성이 무시됩니다. |
| 7 | poster 사용자가 재생 버튼을 누르거나 영상을 탐색하기 전까지 화면에 표시될 대표 이미지(포스터)의 URL입니다. |
| 8 | src 삽입할 영상 파일의 URL입니다. 필수는 아니며, 대신 video 태그 내부에 <source> 요소를 사용하여 영상을 지정할 수도 있습니다. |
| 9 | width 영상이 표시되는 영역의 너비를 CSS 픽셀 단위로 지정합니다. |
video 태그 사용 예제
다음은 여러 속성을 함께 조합한 실제 마크업 예제입니다.
<video src="movie.mp4"
controls
width="640"
height="360"
poster="thumbnail.jpg"
preload="metadata">
현재 브라우저는 video 태그를 지원하지 않습니다.
</video>이처럼 HTML5의 video 태그를 사용하면 복잡한 스크립트나 외부 플러그인 없이도 네이티브 방식으로 동영상을 재생할 수 있습니다. 프로젝트의 성격과 사용자 경험에 맞게 위 속성들을 적절히 조합하여 활용해 보세요.