HTML · 18 미디어 자막과 대체 경로
단계: 네이티브 UI와 미디어 · 외부 실행 예제 · 미리보기 안내 · 저장 ID: html-step-18
목표와 학습 후 역량
- 자막 큐 2개가 정한 시점에 표시된다.
- 영상 로딩 실패 때 대본 링크에 접근한다.
선수 지식
17단위 「dialog와 모달 흐름」의 결과물과 실험 기록
핵심 개념과 설명
미디어 제어
audio와 video의 controls는 네이티브 재생 UI를 제공합니다. 자동 재생에 의존하면 환경 정책과 사용자 선호에 영향을 받습니다.
시간 텍스트
track과 WebVTT로 자막을 연결합니다. 음성 정보는 대본으로도 접근할 수 있도록 구성합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 로컬 프로젝트에서 직접 구현하고 브라우저 개발자 도구로 확인하세요. 별도 폴더에 HTML과 필요한 이미지·미디어 파일을 직접 준비하고 로컬 HTTP 서버로 여세요. Elements·접근성 패널과 실제 키보드 조작으로 확인합니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- media.html 파일에 영상 파일, captions.vtt, 대본 조건을 준비하세요.
- 로컬 짧은 영상에 controls와 한국어 자막 track을 연결하고 대본 링크를 추가하세요.
- 영상 파일, captions.vtt, 대본 조건으로 실행하세요. 확인할 결과: 자막 큐 2개가 정한 시점에 표시된다. 영상 로딩 실패 때 대본 링크에 접근한다. 예상과 실제 결과는 구분해 기록하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 자막 경로 | 정상 파일 | 없는 파일 | 실행 전 가설: 영상은 재생되어도 자막은 표시되지 않을 것이다. 다른 조건은 고정하고 실행 후 실제 결과를 따로 기록합니다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 자막 큐 2개가 정한 시점에 표시된다.
- 영상 로딩 실패 때 대본 링크에 접근한다.
자가 점검
- captions와 subtitles는 어떤 차이가 있나요?
- 소리만으로 전달한 정보가 남아 있나요?
공식 참고
연결된 예제와 실행 범위
외부 HTTP 실행 예제: 6초 합성 MP4, 한국어 VTT, 대본과 정상/실패 전환을 제공합니다. 무음 합성 fixture이며 실제 발화 접근성 평가는 별도 영상으로 수행합니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: dialog와 모달 흐름 · 다음: 반응형 이미지 선택