HTML 태그 정리

비디오 속성

<video controls muted poster="/src/assets/video/poster.jpg">

1. controls → 재생, 일시정지 등의 컨트롤 버튼 표시
2. muted → 초기 음소거 상태로 비디오 재생
3. poster → 비디오가 재생되기 전 미리보기 이미지 설정

다양한 비디오 형식 제공

<source src="/src/assets/video/google-developer-stories.mov" type="video/mov" />
<source src="/src/assets/video/google-developer-stories.webm" type="video/webm" />
<source src="/src/assets/video/google-developer-stories.ogg" type="video/ogg" />
<source src="/src/assets/video/google-developer-stories.mp4" type="video/mp4" />

source 태그를 사용하여 다양한 비디오 포맷을 제공하고
브라우저가 지원하는 형식을 자동으로 선택하여 재생

비디오확장자

MP4 (H.264) → 대부분의 브라우저에서 지원
WebM → 크롬, 파이어폭스 등 지원
Ogg → 일부 오픈소스 브라우저 지원
MOV → 애플(사파리)에서 주로 사용

💡 브라우저마다 지원하는 비디오 형식이 다르기 때문에, 여러 개의 형식을 제공하는 것이 중요함.

자막(track 요소)

<track src="/src/assets/video/stories-en.vtt" 
       kind="captions" 
       srclang="en" 
       label="English Caption">

track 태그는 비디오의 자막 또는 설명을 추가하는 역할
src="/src/assets/video/stories-en.vtt" → 자막 파일 경로 (.vtt 형식 사용)
kind="captions" → 청각 장애인을 위한 자막
srclang="en" → 자막 언어(영어)
label="English Caption" → 사용자가 선택할 수 있는 자막 이름

💡 사용자가 여러 언어 자막을 선택할 수 있도록 다양한 track을 추가할 수도 있음.