실행 가능한 HTML 문서: video 태그

Q: HTML에서 동영상은 어떻게 넣나요?

를 쓰세요. controls 속성은 브라우저의 재생 버튼, 타임라인, 볼륨을 보여 줘요. 이게 없으면 동영상은 첫 프레임(또는 포스터)만 보여 주고 사용자가 재생할 수 없어요.

Q: 동영상 자동 재생이 왜 안 되나요?

브라우저는 소리가 있는 자동 재생을 막아요. autoplay 옆에 muted를 추가하고, iPhone이 전체 화면 대신 페이지 안에서 재생하도록 playsinline도 추가하세요. 처럼요.

Q: 웹에는 어떤 동영상 형식을 써야 하나요?

H.264 영상의 MP4는 현재 모든 브라우저에서 재생되니 안전한 기본값이에요. 로 더 작은 WebM 파일을 먼저 나열하고 브라우저가 지원하는 첫 번째 형식을 고르게 할 수도 있어요.

Q: 동영상에 썸네일을 넣으려면 어떻게 하나요?

이미지 URL과 함께 poster 속성을 쓰세요. 처럼요. 동영상이 재생되기 전까지 이미지가 보여요.

Q: HTML 동영상에 자막을 넣으려면 어떻게 하나요?

동영상 안에 을 추가하세요. 파일은 WebVTT 형식을 쓰고, 브라우저가 컨트롤에 자막 버튼을 보여 줘요.

Q: 동영상을 반응형으로 만들려면 어떻게 하나요?

CSS에서 width: 100%와 height: auto(또는 max-width: 100%)를 지정하세요. 동영상이 컨테이너에 맞춰 크기가 바뀌면서 비율을 유지해요.

동영상 넣는 법

<video> 요소가 동영상 파일을 가리키게 하고, 독자가 재생할 수 있도록 controls를 추가하세요.

<video src="movie.mp4" controls width="640"></video>

controls는 브라우저 자체 플레이어를 보여 줘요. 재생과 일시 정지, 타임라인, 볼륨, 전체 화면이에요. 이게 없으면 동영상은 그냥 가만히 있어요. 이 미리보기는 동영상 파일을 불러올 수 없어서, 이 페이지의 예제들은 스크립트가 그리는 작은 캔버스 애니메이션을 요소에 넣어 줘요. 속성은 파일과 똑같이 동작해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

소스가 파일이 아니라 실시간 스트림이라서 여기서는 타임라인을 끌 수 없고 정해진 길이도 없어요. 실제 .mp4라면 같은 플레이어에 완전한 탐색 막대가 생겨요.

video 속성

속성	하는 일
`controls`	브라우저의 플레이어 컨트롤을 보여 줌
`autoplay`	가능해지자마자 재생 시작(실제로는 `muted`일 때만)
`muted`	소리를 끈 채로 시작
`loop`	끝나면 처음부터 다시 시작
`playsinline`	iPhone에서 전체 화면으로 바꾸지 않고 페이지 안에서 재생
`poster="thumb.jpg"`	동영상이 재생되기 전에 보이는 이미지
`preload`	`none`, `metadata`(크기와 길이만), `auto`(얼마나 내려받을지 브라우저가 정함)
`width`, `height`	픽셀 크기. 둘 다 정하면 동영상이 로드되기 전에 공간을 확보함

autoplay, muted, loop

브라우저는 소리와 함께 스스로 시작하는 동영상을 막아요. 음소거된 동영상은 자동 재생될 수 있고, 배경 동영상과 짧게 반복되는 클립이 이렇게 동작해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

네 속성은 한 세트로 동작해요. 시작하는 autoplay, 브라우저가 허용하게 하는 muted, 클립용 loop, iPhone이 전체 화면으로 열지 않게 하는 playsinline이에요. 소리와 함께 자동 재생되는 동영상은 막히기만 하는 게 아니라, 음성이 묻혀 버리는 스크린 리더 사용자에게도 문제예요. 5초보다 길게 재생되는 클립이라면 멈출 수 있는 방법을 주세요.

poster 이미지와 preload

poster는 동영상이 재생되기 전에 썸네일처럼 이미지를 보여 줘요. 여기서는 동영상에 소스가 전혀 없어서 포스터만 보여요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

preload="none"이면 독자가 재생을 누를 때까지 브라우저가 아무것도 내려받지 않고, 포스터 덕분에 공간이 비어 보이지 않아요. 재생하기 전에 길이를 보여 주고 싶다면 preload="metadata"를 쓰세요. 포스터가 없으면 대부분의 브라우저는 첫 프레임을 불러온 뒤 그걸 보여 줘요.

source로 형식과 대체 수단 주기

src 대신 <source> 요소로 여러 파일을 나열할 수 있어요. 브라우저는 지원하는 첫 번째 파일을 재생해요.

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

H.264 영상의 MP4는 현재 모든 브라우저에서 재생되니, 파일이 하나뿐이라면 안전한 선택이에요. type 속성은 재생할 수 없는 형식을 내려받지 않고 건너뛰게 해 줘요. 끝의 텍스트는 <video>를 아예 지원하지 않는 브라우저에서만 보여요.

track으로 자막 넣기

<track kind="captions">은 시간이 적힌 줄로 된 일반 텍스트 파일인 WebVTT 파일을 불러와요. 브라우저가 컨트롤에 자막 버튼을 추가하고 동영상 위에 텍스트를 그려요.

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

자막은 청각 장애가 있거나 잘 듣지 못하는 시청자, 소리를 끄고 보는 사람, 제2외국어로 동영상을 보는 모든 사람에게 도움이 돼요. 클릭하지 않아도 보이게 하려면 track에 default를 추가하세요. 다른 도메인의 자막 파일은 CORS 헤더와 동영상의 crossorigin이 필요해요.

스타일과 JavaScript 제어

동영상은 이미지처럼 대체 요소예요. height: auto와 함께 쓴 width: 100%가 반응형으로 만들고, object-fit은 모양이 다른 상자를 어떻게 채울지 정해요. JavaScript에서는 play(), pause(), currentTime, volume과 play, pause, ended 같은 이벤트를 쓸 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play()는 브라우저가 재생을 막으면(예를 들어 음소거하지 않은 자동 재생) 거부되는 프로미스를 돌려주니, 실서비스 코드에서는 catch로 처리하세요. 컨트롤을 직접 만드는 건 선택 사항이에요. 기본 controls는 키보드로 쓸 수 있고 번역도 되어 있는데, 직접 만든 버튼은 이걸 다시 구현해야 해요. YouTube나 Vimeo에 올린 동영상은 대신 iframe으로 그 플레이어를 삽입해요.

자주 하는 실수

muted 없이 자동 재생. 브라우저가 막아요. muted와 playsinline을 추가하세요.
controls를 빼먹음. 직접 만들지 않는 한 독자가 동영상을 시작할 방법이 없어요.
width와 height가 없음. 동영상이 로드될 때 페이지가 들썩여요. 둘 다 정하고 CSS로 크기를 조절하세요.
거대한 파일. 웹용으로 동영상을 압축하고, 페이지 아래쪽 동영상에는 preload="none"이나 "metadata"를 쓰세요.
말소리가 있는 동영상에 자막이 없음. <track kind="captions">을 추가하세요.

자주 묻는 질문

HTML에서 동영상은 어떻게 넣나요?

<video src="movie.mp4" controls width="640"></video>를 쓰세요. controls 속성은 브라우저의 재생 버튼, 타임라인, 볼륨을 보여 줘요. 이게 없으면 동영상은 첫 프레임(또는 포스터)만 보여 주고 사용자가 재생할 수 없어요.

동영상 자동 재생이 왜 안 되나요?

브라우저는 소리가 있는 자동 재생을 막아요. autoplay 옆에 muted를 추가하고, iPhone이 전체 화면 대신 페이지 안에서 재생하도록 playsinline도 추가하세요. <video autoplay muted loop playsinline>처럼요.

웹에는 어떤 동영상 형식을 써야 하나요?

H.264 영상의 MP4는 현재 모든 브라우저에서 재생되니 안전한 기본값이에요. <source>로 더 작은 WebM 파일을 먼저 나열하고 브라우저가 지원하는 첫 번째 형식을 고르게 할 수도 있어요.

동영상에 썸네일을 넣으려면 어떻게 하나요?

이미지 URL과 함께 poster 속성을 쓰세요. <video poster="thumb.jpg" controls>처럼요. 동영상이 재생되기 전까지 이미지가 보여요.

HTML 동영상에 자막을 넣으려면 어떻게 하나요?

동영상 안에 <track kind="captions" src="captions.vtt" srclang="en" label="English">을 추가하세요. 파일은 WebVTT 형식을 쓰고, 브라우저가 컨트롤에 자막 버튼을 보여 줘요.

동영상을 반응형으로 만들려면 어떻게 하나요?

CSS에서 width: 100%와 height: auto(또는 max-width: 100%)를 지정하세요. 동영상이 컨테이너에 맞춰 크기가 바뀌면서 비율을 유지해요.