<video> — 미디어 태그 도감

올바른 사용

controls 속성 (사용자가 재생 제어)

track으로 자막·캡션 제공

poster로 미리보기 이미지 (LCP 영향)

preload=metadata가 기본 권장

표준 video

<video
  controls
  preload="metadata"
  poster="/video-poster.jpg"
  width="800"
  height="450"
>
  <source src="/intro.webm" type="video/webm" />
  <source src="/intro.mp4" type="video/mp4" />
  <track
    src="/intro.ko.vtt"
    kind="captions"
    srclang="ko"
    label="한국어"
    default
  />
  <p>비디오를 재생할 수 없습니다. <a href="/intro.mp4">다운로드</a></p>
</video>

source codec fallback + track 자막 + fallback 메시지.

배경 비디오 (자동 재생)

<video
  autoplay
  muted
  loop
  playsinline
  aria-label="배경 영상 — 사무실 풍경"
>
  <source src="/bg.webm" type="video/webm" />
</video>

muted autoplay는 OK. aria-label로 시각 사용자에게 영상 의미 전달.

자주 보는 안티패턴

autoplay만 박고 controls 누락

자막 없음 (track 누락)

muted autoplay만 (a11y 위반 아님이지만 콘텐츠 손실)

큰 video를 preload=auto로 (대역폭 낭비)

controls 누락

<video autoplay>
  <source src="/intro.mp4" />
</video>

사용자가 일시정지·다시 보기 불가. WCAG 1.4.2 위반.

자막 없음

<video controls>
  <source src="/talk.mp4" />
  <!-- track 누락 -->
</video>

청각장애 사용자가 콘텐츠 접근 불가. WCAG 1.2.2 위반.

해설

비디오 콘텐츠의 표준. controls·autoplay·loop·muted 같은 속성과 source·track 자식으로 풍부한 재생 경험.

SEO 관점에서 video는 VideoObject Schema와 짝을 이뤄 동영상 검색 결과에 직접 노출. YouTube 외 자체 호스팅 비디오라도 Schema 마크업이 정확하면 검색에 노출 가능. thumbnailUrl, uploadDate, duration 같은 Schema 필드를 채우는 게 표준.

GEO 관점에서 AI가 비디오 콘텐츠를 답변에 활용하려면 — 자막(track)이 핵심. AI는 비디오 자체를 분석하지 못하지만 자막의 텍스트를 분석해 비디오의 내용을 인지. 자막 없는 비디오는 AI에 콘텐츠 0.

A11y 관점에서 가장 critical. 청각장애 사용자가 비디오에 접근하는 유일한 경로가 자막. WCAG 1.2.2 "녹화된 동영상에 자막 제공"이 의무. 자막 없는 비디오는 접근성 위반.

자주 보는 안티패턴: controls 누락(사용자가 일시정지 불가 — WCAG 1.4.2 위반), 자막 없음(WCAG 1.2.2 위반), autoplay만 박고 muted 안 함(브라우저가 자동 차단 — muted autoplay만 작동), 큰 비디오를 preload="auto"로(첫 로드 시 전체 다운로드 — 대역폭 낭비, preload="metadata"가 권장).

controls 속성 — 재생/일시정지/볼륨 컨트롤 표시. 자동 재생 비디오에도 controls를 둬야 사용자가 통제 가능. WCAG 1.4.2 "오디오 자동 재생 제어"가 명시.

muted autoplay 조합 — 배경 비디오에 자주 사용. 소리 없이 자동 재생은 대부분의 브라우저에서 허용. 소리 있는 autoplay는 차단됨.

playsinline — iOS Safari에서 비디오가 전체화면으로 강제 전환되지 않음. 인라인 재생을 위해 필수. 데스크탑은 무관.

poster — 비디오 로드 전 미리보기 이미지. LCP 후보가 될 수 있으므로 최적화 권장.

track — 자막·캡션·자막 자동 번역의 자식 태그. WebVTT 포맷. captions, subtitles, descriptions 등 kind 속성으로 종류 구분. 별도 카드.

Schema.org VideoObject 결합 — 동영상 SEO의 정답. uploadDate, duration, thumbnailUrl, name, description, contentUrl을 마크업하면 Video Search Results에 노출.

AI 자동 자막 — YouTube의 자동 자막은 부정확. 수동 자막 또는 검수된 자동 자막이 a11y와 GEO 모두에 좋은 신호. 한국어 자동 자막은 영어보다 정확도 낮으므로 검수가 권장.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설