멀티미디어: Video 최적화

핵심 개념

<video> 태그 하나로 웹에서 영상을 보여줄 수 있어요. 다양한 포맷을 지원하기 위해 <source>를 여러 개 넣는 최적화 기법을 배웁니다.

코드 분석

HTML5📋 코드 (4줄)

<video controls width='300'>
  <source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'>
  영상을 재생할 수 없습니다.
</video>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 video 태그 구현에서
포맷·코덱·preload·poster 설정의 문제를 찾아
LCP(Core Web Vitals) 관점에서 최적화해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

<video> 태그로 유튜브·넷플릭스 스타일 플레이어를
자막·재생속도·전체화면 컨트롤까지 포함해서
바로 쓸 수 있는 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 페이지의 video 요소 전체를 분석해서
파일 크기, LCP 점수, 모바일 데이터 사용량,
접근성을 종합 리포트로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년에 자체 video 호스팅이
YouTube·Vimeo 임베드보다 합리적인 케이스가 있는지,
비용·성능 관점에서 솔직히 말해줘.

⭐ 이것만 기억하세요

멀티미디어: Video 최적화는 이 3가지만 확실히 잡으세요

1.video 태그 없이 외부 플레이어에 의존하면 로딩이 느리고 모바일 호환성 문제가 반복됩니다

2.source 태그로 여러 포맷(mp4, webm)을 제공하면 브라우저가 지원하는 형식을 자동 선택합니다

3.다음 챕터에서 영상과 함께 오디오를 다루는 audio 태그를 배웁니다

진행도 10 / 33