HTML5 <video> 태그로 MP4 동영상 삽입하는 방법 완벽 가이드

오늘은 HTML5의 <video> 요소를 사용해 MP4 동영상을 빠르게 웹페이지에 삽입하는 방법을 알아보겠습니다. 이 글에서 다룰 내용은 다음과 같습니다.

동영상 플레이어 크기 조절 방법
동영상 자동 재생(autoplay) 설정 방법
동영상 무한 반복 재생(loop) 설정 방법

많은 튜토리얼에서 짧은 동영상을 표현할 때 GIF를 사용하지만, 실제로는 MP4가 화질이 더 좋고 용량도 적게 듭니다. 또한 MP4는 WebM과 달리 모든 최신 브라우저에서 호환되며, YouTube 같은 동영상 서비스에도 업로드할 수 있다는 장점이 있습니다.

HTML5 video 요소로 동영상 삽입하기

HTML에서 MP4 동영상을 재생하려면 HTML5의 <video> 요소를 사용해야 합니다. 가장 기본적인 형태는 아래와 같습니다.

<video width="500" controls>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

controls 속성은 제거할 수도 있지만, 사용자가 동영상을 일시정지·재생·되감기할 수 있게 해주는 핵심 기능이므로 제거하지 않는 것을 권장합니다.

500 값은 픽셀 단위(500px)를 의미합니다.

"path-to-your-video.mp4" 부분을 실제 MP4 파일 경로로 바꿔주기만 하면 됩니다. 테스트용으로 아래 샘플 URL을 사용할 수 있습니다.

https://res.cloudinary.com/techstacker/video/upload/f_auto/v1548698438/TechStacker/mac-drag-app-icon-to-dock.mp4

동영상 플레이어 크기 조절하기 (너비/높이)

현재 동영상 너비는 500픽셀로 설정되어 있으며, 원하는 값으로 자유롭게 변경할 수 있습니다. 동영상이 속한 컨테이너 영역 전체(100%)를 차지하게 하려면 width="100%"로 지정하면 됩니다.

height 속성을 사용하면 높이도 조절할 수 있습니다. 두 속성을 함께 사용한 예시는 다음과 같습니다.

<video width="100%" height="400" controls>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

동영상 자동 재생 설정하기

사용자가 동영상을 처음 화면에서 볼 때 한 번 자동으로 재생되도록 하려면, video 요소에 autoplay 속성을 추가하면 됩니다.

<video width="500" controls autoplay>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

자동 재생(autoplay)의 작동 원리

autoplay 기능은 동영상이 사용자의 화면 뷰포트(viewport) 안에 들어오는 순간 자동으로 실행됩니다. 참고로 최신 브라우저들은 소리가 켜진 상태의 자동 재생을 차단하는 경우가 많으므로, 음소거 상태(muted 속성 추가)에서 함께 사용하는 것이 좋습니다.

동영상 무한 반복 재생 설정하기

MP4 동영상을 무한히 반복 재생하려면 loop 속성을 사용하세요.

<video width="500" controls autoplay loop>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

주의: controls 속성이 있으면 사용자가 동영상을 정지할 수 있지만, 반복 재생되는 동영상은 특히 소리가 함께 나올 경우 사용자에게 불쾌감을 줄 수 있습니다. 따라서 loop 속성은 배경 영상처럼 반복 재생이 필요한 상황에만 신중하게 사용하는 것이 좋습니다.

브라우저 호환성

구형 브라우저를 사용하는 시대는 거의 지나갔지만, video 요소를 지원하지 않는 브라우저를 위해 <video> 태그 사이에 안내 문구를 추가할 수 있습니다.

<video width="500" controls autoplay>
  <source src="path-to-your-video.mp4" type="video/mp4" />
  사용 중인 브라우저가 오래되었습니다. 동영상을 보려면 브라우저를 업데이트해 주세요.
</video>

이 문구는 Internet Explorer 9 미만 등 video 태그를 지원하지 않는 구형 브라우저에서만 표시됩니다.

WebM + MP4 폴백(Fallback) 함께 사용하기

동일한 동영상을 WebM과 MP4 두 가지 버전으로 준비했다면, 아래 코드처럼 작성하여 WebM을 지원하지 않는 브라우저에서는 MP4가 대신 재생되도록 설정할 수 있습니다.

<video width="500" controls>
  <source src="path-to-your-video.webm" type="video/webm" />
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

참고: WebM은 파일 크기가 더 작아 로딩 속도에 유리하지만, 브라우저 지원 범위가 MP4보다 좁습니다. 현재는 Chrome, Opera, Firefox, Edge 등 주요 최신 브라우저 대부분이 WebM을 지원하지만, Safari 등 일부 환경을 고려하면 MP4 폴백을 함께 두는 것이 안전합니다.

추가 팁: 유용한 무료 도구

MP4 동영상을 간편하게 녹화할 수 있는 무료 도구를 소개합니다.

Kap 앱 (macOS)
Icecream Screen Recorder (Windows)

녹화한 동영상을 무료로 업로드하고 저장·호스팅하려면 Cloudinary를 추천합니다. CDN 기반으로 자동 최적화까지 지원해 웹사이트 성능 관리에도 도움이 됩니다.

HTML5 태그로 MP4 동영상 삽입하는 방법 완벽 가이드