HTML video 태그: 동영상 삽입·자동 재생·반응형 크기 설정

HTML Reference

작성일 2024-09-08 최근 수정일 2026-10-30

HTML의 video 태그는 웹페이지 안에 동영상 플레이어를 넣습니다. 파일 주소를 src 또는 자식 source에 지정하고 controls를 추가하면 사용자가 직접 재생·일시 정지를 조작할 수 있습니다. 자동 재생은 autoplay를 써도 브라우저 정책에 따라 차단될 수 있습니다.

재생 방식에 맞는 속성 선택

속성	용도	선택할 때 확인할 점
`controls`	기본 재생 컨트롤 표시	일반적인 콘텐츠 영상에는 제공하는 것이 좋습니다. 모양과 제공되는 버튼은 브라우저마다 다릅니다.
`muted`	초기 음소거	소리가 켜진 자동 재생을 기대하지 마세요. 음소거도 자동 재생 성공을 보장하는 것은 아닙니다.
`autoplay`, `loop`	자동 시작, 끝난 뒤 반복	독자가 멈출 수 있게 하고, 움직임이 글 읽기를 방해하는지 검토합니다.
`playsinline`	요소가 있는 자리에서 재생하도록 요청	모바일 재생에 유용하지만 모든 기기에서 같은 화면 동작을 보장하지는 않습니다.
`poster`	재생 전 표시할 이미지 URL	실제로 접근 가능한 이미지가 필요합니다. 동영상 주소를 넣는 속성이 아닙니다.
`preload`	미리 읽을 데이터에 대한 힌트	`none`은 미리 읽지 않기, `metadata`는 길이 등 메타데이터, `auto`는 전체 파일까지 읽어도 좋다는 뜻입니다. 브라우저가 반드시 따르는 명령은 아닙니다.

controls, muted, autoplay, loop는 불리언 속성입니다. 속성이 있으면 활성화되므로 autoplay="false"로 끌 수 없습니다. 자동 시작을 끄려면 autoplay 자체를 제거하세요. 자동 재생을 요청하면 영상 재생을 위한 로딩이 필요하므로 preload="none"만으로 다운로드를 막을 수도 없습니다.

복사해서 실행하는 동영상 예제

아래 코드를 video.html로 저장해 브라우저에서 여세요. MDN 문서에서 사용하는 꽃 영상의 공개 예제 파일을 불러오므로 인터넷 연결이 필요합니다. 자신의 서비스에 적용할 때는 사용할 권리가 있는 영상을 직접 호스팅하고 주소를 교체하세요.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML 동영상 재생</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    video { display: block; width: 640px; max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <h1>꽃 영상</h1>
  <video id="flower" controls playsinline preload="metadata" aria-label="바람에 흔들리는 꽃 영상">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
    이 브라우저는 video 요소를 지원하지 않습니다.
  </video>
  <p>영상 설명: 꽃과 주변 풀잎이 바람에 흔들립니다.</p>
  <p><a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
    target="_blank" rel="noopener noreferrer">MP4 영상 파일 열기</a></p>
</body>
</html>

재생 버튼이 있는 플레이어가 표시되는지 확인하고 재생하세요. 꽃 영상이 움직이며 재생 위치가 앞으로 이동해야 합니다. 기본 예제에는 자동 재생이나 반복 속성이 없습니다.
일시 정지 버튼을 누르면 화면의 움직임이 멈춥니다. 좁은 창에서는 플레이어가 본문 너비 안으로 줄어들어야 합니다.
반복을 비교하려면 여는 video 태그에 loop만 추가하고 다시 여세요. 끝까지 재생했을 때 처음으로 돌아가는지 확인한 뒤 속성을 제거해 원래 동작으로 돌립니다.

source는 브라우저가 재생할 수 있는 후보를 선택하도록 파일 형식을 제공하는 요소입니다. 같은 영상의 실제 WebM·MP4 파일을 각각 준비해야 하며, 파일 확장자를 바꾸는 것만으로 형식이 변환되지는 않습니다. MP4라는 컨테이너 안에 어떤 코덱으로 영상·소리를 저장했는지도 재생 가능 여부에 영향을 줍니다.

자동 재생과 모바일 크기 조절

자동 시작이 필요한 경우 예제의 여는 태그에 autoplay muted를 추가해 비교할 수 있습니다. playsinline과 controls는 유지하세요. 브라우저의 사용자 설정·절전 정책·사이트 사용 이력 등 때문에 자동 재생이 거절될 수 있으므로 사용자가 누를 재생 버튼을 남겨 두는 것이 좋습니다.

예제 CSS의 width: 640px는 원하는 표시 너비이고 max-width: 100%는 좁은 부모 영역에서 넘치지 않도록 제한합니다. height: auto는 원래 영상의 비율을 유지합니다. 일정한 비율의 틀을 별도로 정하고 영상을 채운다면 object-fit: contain은 전체 장면을 보존하고, cover는 가장자리 일부를 잘라 틀을 채우므로 중요한 내용이 잘리지 않는지 확인하세요.

재생이 안 될 때와 접근성 확인

파일 주소: 영상 링크를 직접 열어 파일이 존재하고 로그인 없이 접근 가능한지 확인합니다. 자신의 로컬 경로를 서버 경로로 착각하거나 파일명의 대소문자가 다른지도 점검합니다.
형식과 응답: 서버가 올바른 video/mp4·video/webm MIME 유형을 보내는지, 지원되는 코덱인지 확인합니다. 개발자 도구의 네트워크 탭은 요청 실패와 응답 헤더를 확인하는 데 도움이 됩니다.
자동 재생: 직접 재생 버튼을 눌렀을 때는 정상이라면 파일 오류와 자동 재생 차단을 구분해야 합니다.
대체 안내: video 태그 안의 문장은 요소를 지원하지 않는 브라우저를 위한 것입니다. 현대 브라우저에서 파일 로딩이 실패했다고 그 문장이 자동으로 오류 안내로 표시되지는 않습니다. 그래서 예제는 영상 링크와 장면 설명을 플레이어 밖에도 둡니다.
자막과 설명: 대사가 있는 영상에는 정확한 자막과 필요한 대본을 제공하세요. track 요소와 WebVTT 파일로 자막을 연결할 수 있습니다. 시각 정보만으로 전달되는 핵심 내용은 텍스트 설명이나 음성 해설도 검토해야 합니다.

속성 정의는 MDN video 요소 문서, 자막 파일 구성은 MDN HTML 동영상 자막 추가 안내에서 확인할 수 있습니다.

HTML Reference