video element - by. UXKM

요약 설명

<video> 요소는 웹 페이지에 비디오 콘텐츠를 삽입하고 재생할 수 있도록 하는 시맨틱 태그로, 브라우저에서 플러그인 없이 직접 동영상을 표시하고 제어할 수 있게 합니다.
src 속성이나 <source> 태그를 통해 영상 파일을 지정하며, controls, autoplay, loop, muted, poster 등의 속성으로 재생 기능과 사용자 인터페이스를 제어할 수 있습니다. 접근성을 위해 자막(<track>)을 함께 제공하는 것이 좋으며, 다양한 디바이스에서 미디어 콘텐츠를 일관되게 제공할 수 있습니다.

원본 비디오를 압축해서 동영상 파일로 변환한 것을 인코딩(encording)이라 하고, 영상을 꺼내 플레이어에서 보여주는 것을 디코딩(decoding)이라고 하며, 이 두 가지를 처리하는 것이 비디오 코덱입니다.

주요 역할 및 특징

  1. 웹페이지에 동영상을 삽입하고 재생 가능
    • <video> 요소를 사용하면 브라우저에서 직접 비디오를 재생할 수 있습니다.
    • src 속성을 사용하거나 <source> 요소를 활용하여 여러 형식의 비디오를 제공할 수 있습니다.
    • 별도의 플러그인(예: Flash)을 설치할 필요 없이 HTML5에서 기본 지원합니다.
  2. 브라우저 기본 컨트롤 UI 제공
    • controls 속성을 사용하면 재생, 일시 정지, 볼륨 조절 등의 기본 UI를 제공합니다.
    • 별도의 JavaScript를 사용하여 사용자 정의 컨트롤을 만들 수도 있습니다.
  3. 자동 재생 및 반복 재생 가능

    autoplay, loop, muted 등의 속성을 설정하여, 자동 재생, 반복 재생, 음소거 등의 기능을 추가할 수 있습니다.

  4. 다양한 비디오 포맷 지원

    브라우저별 지원이 다르므로, 여러 개의 <source> 태그를 사용하여 다양한 형식(mp4, webm, ogg 등)을 제공할 수 있습니다.

  5. 자막 및 설명 추가 가능

    <track> 태그를 사용하면 자막 또는 설명을 추가하여 접근성을 높일 수 있습니다.

  6. 대체 콘텐츠 제공 가능

    <video> 요소를 지원하지 않는 브라우저에서는 fallback text(예: 다운로드 링크)를 제공할 수 있습니다.

CSS 기본 값

<video> 요소는 기본적으로 인라인 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<video> 속성 요약

  • 속성명
  • 설명

  • src [필수]

    재생할 비디오 파일의 경로를 지정합니다.

  • width / height

    비디오 요소의 가로 및 세로 크기를 지정합니다.

  • controls

    사용자에게 재생/일시정지 등의 기본 컨트롤 UI를 제공합니다.

  • autoplay

    페이지 로드 시 자동으로 비디오를 재생합니다.

  • loop

    비디오가 끝나면 자동으로 다시 재생됩니다.

  • muted

    비디오의 소리를 음소거 상태로 시작합니다.

  • poster

    비디오가 로드되기 전에 표시할 이미지(썸네일)를 설정합니다.

  • preload

    비디오 데이터를 미리 로드하는 방식을 설정합니다.

[src] 필수 <video src="파일 경로(URL)">

재생할 비디오 파일의 경로(URL)를 지정합니다. 여러 개의 <source> 요소를 사용할 수도 있습니다.

[width / height] 선택 사항 <video width="값" height="값">

비디오의 가로(width), 세로(height) 크기를 지정합니다. 일반적으로 픽셀(px), 퍼센트(%)가 가장 많이 사용됩니다.
width, height 중 하나만 설정해도 영상의 비율이 유지되며, 크기를 지정하지 않으면 원본 크기로 표시됩니다.

[controls] Boolean - 선택 사항 <video controls>

사용자가 조작할 수 있는 기본 컨트롤(재생, 일시정지, 볼륨 조절 등)을 표시합니다.
값 없이 속성만 선언하면 컨트롤이 활성화됩니다.

[autoplay] Boolean - 선택 사항 <video autoplay>

페이지 로드 시 자동으로 비디오를 재생합니다. 대부분의 브라우저에서는 muted 속성과 함께 사용해야 자동 재생이 가능합니다.

[loop] Boolean - 선택 사항 <video loop>

비디오가 끝나면 자동으로 다시 처음부터 재생됩니다.
무한 반복되는 비디오(예: 배경 영상)에 적합합니다.

[muted] Boolean - 선택 사항 <video muted>

비디오의 오디오를 음소거한 상태로 시작합니다. 자동 재생(autoplay)과 함께 사용할 경우 필수적입니다.

[poster] 선택 사항 <video poster="파일 경로">

비디오가 로드되기 전에 표시할 이미지를 설정합니다. 비디오가 재생되기 전까지 이 이미지가 나타납니다.

[preload] 선택 사항 <video preload="값">

비디오 데이터를 미리 로드하는 방식을 지정합니다.

값 :
auto : 브라우저가 필요하다고 판단하면 전체 비디오를 미리 로드
metadata : 비디오의 메타데이터(길이, 썸네일 등)만 로드
none : 비디오를 미리 로드하지 않음 (사용자가 재생할 때 로드)

예제

여러 형식의 비디오 제공 (<source> 사용)

아래 예제에서는 <video> 요소 내부에 일반 텍스트와 다운로드 링크가 포함되어 있습니다.
비디오를 지원하지 않는 브라우저에서도 사용자에게 대체 옵션을 제공하기 위한 것으로, 사용자 경험을 보장하기 위해 중요합니다.

자동 재생 및 반복 재생 설정

컨트롤 설정

비디오 썸네일 추가 및 화면에 꽉차게 설정

JavaScript를 활용한 비디오 제어

접근성을 고려한 aria-label 활용

주의사항

  • 모든 브라우저가 동일한 비디오 포맷을 지원하지 않으므로, mp4, webm, ogg 등의 다양한 형식을 제공하는 것이 좋습니다.
    MP4(H.264)는 대부분의 브라우저에서 지원되지만, WebM이나 Ogg는 일부 브라우저에서만 지원됩니다.
  • 대부분의 최신 브라우저에서는 음소거(muted) 상태가 아닌 경우 자동 재생이 제한됩니다.
    따라서 autoplay 속성을 사용하려면 muted 속성을 함께 추가해야 합니다.
  • 비디오 파일은 용량이 크므로 최적화된 파일을 제공하는 것이 중요합니다. 브라우저가 필요할 때만 비디오를 로드하도록 preload="metadata" 옵션을 활용할 수도 있습니다.
  • 일부 모바일 브라우저는 autoplay 기능을 지원하지 않으며, 데이터 사용량을 줄이기 위해 자동 로딩을 제한할 수 있습니다.

웹에서 사용되는 비디오 파일 형식 정리

요약 설명

웹에서 사용되는 비디오 파일 형식은 파일 확장자, 코덱(Codec), 브라우저 지원 여부 등에 따라 구분됩니다.
비디오 파일 형식은 단순히 확장자만이 아니라, 어떤 코덱을 사용하는지도 중요한 요소입니다.

주요 비디오 파일 형식

  • 확장자
  • 형식 (컨테이너)
  • 주요 코덱
  • 지원 브라우저

  • .mp4

    MPEG-4

    H.264, AAC

    ✅ 모든 최신 브라우저에서 지원

  • .webm

    WebM

    VP8, VP9, Opus

    ✅ 크롬, 파이어폭스, 엣지, 오페라 (iOS 사파리에서는 제한적 지원)

  • .ogv

    Ogg

    Theora, Vorbis

    ✅ 크롬, 파이어폭스, 오페라 (일부 브라우저 미지원)

  • .mov

    QuickTime

    H.264, AAC

    ❌ 일반적으로 웹에서 직접 사용하지 않음 (변환 필요)

  • .avi

    AVI

    다양한 코덱 사용 가능

    ❌ 웹에서 직접 사용하지 않음 (변환 필요)

  • .mkv

    Matroska

    H.264, VP9, Opus 등

    ❌ 웹에서 직접 사용하지 않음 (변환 필요)

비디오 파일 형식 상세 설명

✅ MP4 (.mp4)

가장 널리 사용되는 웹 비디오 형식으로, HTML5 비디오의 기본 표준이며, 가장 추천되는 형식입니다.

코덱
H.264 (비디오), AAC (오디오)를 주로 사용합니다.
장점
모든 최신 브라우저에서 지원됩니다.
높은 압축률을 유지하면서도 품질이 우수합니다.
HTML5 <video> 요소에서 안정적으로 사용 가능합니다.
단점
최신 코덱(VP9, AV1)보다 압축 효율이 다소 낮을 수 있습니다.
지원 브라우저
크롬, 파이어폭스, 사파리, 엣지, 오페라, 모바일 브라우저 모두 지원

✅ WebM (.webm)

구글에서 개발한 오픈 소스 비디오 포맷으로, MP4보다 가볍고 효율적입니다. 그러나 모든 브라우저에서 호환되지 않으므로 MP4와 함께 제공하는 것이 좋습니다.

코덱
VP8, VP9 (비디오) / Opus, Vorbis (오디오)를 사용합니다.
장점
MP4보다 높은 압축률을 제공합니다.
크롬, 파이어폭스 등 최신 브라우저에서 최적화되어 있습니다.
단점
iOS 사파리에서 기본적으로 지원되지 않습니다.
구형 브라우저에서는 재생할 수 없습니다.
지원 브라우저
크롬, 파이어폭스, 엣지, 오페라 / ❌ iOS 사파리에서는 제한적 지원

✅ OGV (.ogv)

오픈 소스 비디오 형식으로 Ogg 컨테이너를 사용하지만, 거의 활용되지 않으므로 MP4 또는 WebM을 사용하는 것이 더 적합합니다.

코덱
Theora (비디오) / Vorbis (오디오)를 사용합니다.
장점
자유롭게 사용할 수 있는 오픈 소스 포맷입니다.
단점
MP4나 WebM보다 압축률이 낮아 파일 크기가 큽니다.
일부 브라우저에서 지원되지 않습니다.
지원 브라우저
크롬, 파이어폭스, 오페라 / ❌ 사파리, 엣지는 미지원

❌ MOV (.mov)

애플이 개발한 QuickTime 비디오 포맷입니다.

단점
대부분의 웹 브라우저에서 기본적으로 지원되지 않습니다.
웹에서 사용하려면 MP4로 변환하는 것이 필요합니다.

❌ AVI (.avi)

마이크로소프트에서 개발한 오래된 비디오 컨테이너입니다.
웹에서는 AVI 사용을 권장하지 않으며, MP4로 변환하시는 것이 바람직합니다.

단점
파일 크기가 매우 크며, 웹에서 최적화되지 않았습니다.
웹 브라우저에서 기본적으로 지원되지 않습니다.

❌ MKV (.mkv)

Matroska 포맷으로, 다양한 오디오 및 비디오 스트림을 포함할 수 있습니다. 주로 영화 및 고화질 영상에 사용되며, 웹에서는 MP4 또는 WebM이 더 적합합니다.

단점
웹 브라우저에서 기본적으로 지원되지 않습니다.
파일 크기가 클 수 있습니다.