본문 바로가기
개발 실무

HTML5 video 태그 완벽 사용법 — 웹페이지에 동영상 넣기 (자동재생·포맷·문제 해결)

개발자 살리에리 2018. 7. 16. 00:00
반응형

HTML5 video 태그로 웹페이지에 동영상 넣기
HTML5 video 태그로 웹페이지에 동영상 넣기

 

⚡ 한 줄 요약:
웹페이지에 동영상은 <video> 태그 한 줄이면 넣습니다.
핵심은 controls(재생버튼)·<source>(포맷)·자동재생 시 muted(필수) 세 가지고, 브라우저 호환은 mp4(H.264) 하나면 대부분 해결됩니다.
아래에 복붙용 전체 예제와 "자동재생이 안 되는 이유"까지 정리했습니다.

 

 

📑 목차

 

 

🎬 video 태그, 3줄이면 끝

HTML5부터는 플러그인(옛날 Flash) 없이 브라우저가 동영상을 직접 재생합니다.
기본형은 이게 전부입니다.

<video src="movie.mp4" controls width="640"></video>
  • src : 재생할 동영상 파일 경로
  • controls : 재생/일시정지/볼륨 바를 표시(이거 없으면 화면만 나오고 조작 불가)
  • width : 가로 크기(px). 높이는 비율에 맞춰 자동

이 한 줄이면 이미 동영상이 재생됩니다.
나머지는 "어떻게 보이고 어떻게 시작하느냐"를 다듬는 속성일 뿐입니다.

 

 

🧩 꼭 아는 속성 6개

<video>에 붙이는 대표 속성입니다.
필요한 것만 골라 쓰면 됩니다.

 

속성 하는 일
controls 재생 컨트롤 바 표시
autoplay 페이지 열리면 자동 재생 (단, muted와 함께여야 작동 — 아래 참고)
muted 소리 끈 상태로 시작
loop 끝나면 자동 반복
poster 재생 전 보여줄 썸네일 이미지(poster="thumb.jpg")
preload 미리 받는 정도: none(안 받음) / metadata(길이 등만) / auto(전체)

 

width·height도 지정할 수 있는데, 레이아웃 밀림(CLS) 을 막으려면 넣어주는 게 좋습니다.

 

 

🔀 여러 포맷 지원 (source)

브라우저마다 지원 포맷이 조금씩 다릅니다.
src 대신 여러 개의 <source>를 넣으면 브라우저가 재생 가능한 첫 번째 파일을 고릅니다.

<video controls width="640" poster="thumb.jpg">
  <source src="movie.mp4"  type="video/mp4">
  <source src="movie.webm" type="video/webm">
  이 브라우저는 video 태그를 지원하지 않습니다.
</video>
  • mp4 (H.264) — 사실상 모든 브라우저·기기에서 재생됩니다. 하나만 넣어야 한다면 mp4.
  • webm (VP9/AV1) — 용량 대비 화질이 좋아 크롬·파이어폭스에서 선호. mp4와 함께 두면 최적.
  • <source> 사이의 텍스트("…지원하지 않습니다")는 아주 옛 브라우저용 대체 문구입니다.

type을 정확히 적어주면 브라우저가 헛되이 파일을 받아보지 않아 조금 더 빠릅니다.

 

 

▶️ 자동재생이 안 돼요 (muted 필수)

가장 많이 막히는 부분입니다.
autoplay만 넣으면 요즘 브라우저에서 대부분 재생되지 않습니다. 소리 나는 동영상이 갑자기 재생되는 걸 막기 위해, 브라우저가 정책적으로 차단하기 때문입니다.

해결은 간단합니다 — muted를 같이 넣으면 자동재생이 허용됩니다.

<!-- 자동재생 + 무한반복 배경 영상 (소리 없음) -->
<video autoplay muted loop playsinline width="100%">
  <source src="bg.mp4" type="video/mp4">
</video>
  • muted : 자동재생의 필수 짝
  • playsinline : iPhone에서 전체화면으로 튀지 않고 그 자리에서 재생(모바일 배경영상에 중요)
  • 소리를 꼭 자동으로 내보내고 싶다면? → 정책상 불가. 사용자가 클릭해야 소리가 납니다.

 

 

📱 반응형·접근성 팁

  • 반응형: 가로를 화면에 맞추려면 CSS로 video { max-width: 100%; height: auto; }.
  • 자막: <track kind="subtitles" src="ko.vtt" srclang="ko" label="한국어"> 를 넣으면 자막을 붙일 수 있습니다(접근성·검색 모두 이득).
  • 썸네일: poster를 꼭 지정하세요. 없으면 로딩 전 검은 화면이 보입니다.
  • 성능: 자동재생 배경영상이 아니라면 preload="metadata" 로 두어 불필요한 데이터 낭비를 줄이세요.

 

 

🧪 전체 예제 (복붙용)

아래를 .html 파일로 저장하고 같은 폴더에 movie.mp4·thumb.jpg를 두면 바로 동작합니다.

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>HTML5 video 예제</title></head>
<body>
  <h1>동영상 재생 예제</h1>

  <video controls width="640" poster="thumb.jpg" preload="metadata">
    <source src="movie.mp4"  type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <track kind="subtitles" src="ko.vtt" srclang="ko" label="한국어">
    이 브라우저는 video 태그를 지원하지 않습니다.
  </video>
</body>
</html>

여기까지면 웹페이지 동영상 삽입은 충분합니다.
유튜브 영상을 넣고 싶을 때는 <video>가 아니라 유튜브가 주는 <iframe> 코드를 쓴다는 점만 기억하세요(이 경우 파일을 직접 올리지 않습니다).

 

 

🔖 더 읽어보기

동영상은 "일단 mp4 + controls"로 시작하고, 필요할 때 자동재생(muted)·포맷(webm)·자막(track)을 하나씩 얹으면 됩니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'개발 실무' 카테고리의 다른 글

[R]HTML 플러그인(HTML Plug-ins & object & embed)  (0) 2018.07.18
[R]HTML5 오디오(HTML5 Audio)  (0) 2018.07.17
[R]HTML 멀티미디어(HTML Multimedia)  (0) 2018.07.15
[R]HTML Google지도(HTML Google Maps)  (0) 2018.07.14
HTML5 SVG  (0) 2018.07.13

'개발 실무' Related Articles

티스토리툴바