HTML 페이지에 비디오 추가하는 기본 방법
HTML 페이지에 동영상을 삽입하려면 <video> 요소를 사용하면 됩니다. 이 요소는 HTML 문서 안에 동영상을 표준 방식으로 포함할 수 있도록 정의된 공식 태그입니다.
동영상을 추가할 때는 레이아웃이 깨지지 않도록 높이(height)와 너비(width)를 반드시 함께 지정해 주는 것이 좋습니다. 또한 <source> 요소를 활용하면 재생할 동영상 파일의 경로는 src 속성으로, 동영상의 형식은 type 속성으로 명확하게 지정할 수 있습니다.
<video> 태그에서 지원하는 주요 속성
HTML의 <video> 태그는 아래와 같은 추가 속성들을 지원합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| height | 픽셀(px) | 동영상의 높이를 지정합니다. |
| src | URL | 재생할 소스 파일의 주소를 지정합니다. |
| type | MIME 유형 | 동영상의 MIME 타입을 지정합니다. |
| width | 픽셀(px) | 동영상의 너비를 지정합니다. |
실제 사용 예시
다음은 <video> 태그를 활용해 MP4 동영상을 웹페이지에 삽입하는 기본적인 코드 예시입니다.
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
이 브라우저는 video 태그를 지원하지 않습니다.
</video>위 예시처럼 controls 속성을 함께 추가하면 재생·일시정지·음량 조절 버튼이 화면에 표시되어, 사용자가 직접 동영상을 제어할 수 있습니다. 이 외에도 자동 재생을 위한 autoplay, 반복 재생을 위한 loop 등의 속성을 상황에 맞게 조합하여 사용하면 더욱 완성도 높은 동영상 플레이어를 만들 수 있습니다.