Open code, practice, and notes →
Download source with English comments · for reading
HTML · 18 Media Captions and Alternatives
Series contents · Technology map
Stage: Native UI and Media · External example · preview instructions · Storage ID: html-step-18
Goals and learning outcomes
- The 2 caption cues appear at their specified times.
- Access the transcript link when the video fails to load.
Prerequisites
The work and experiment records from Unit 17, “dialog and Modal Flow”.
Key concepts and explanations
Media Controls
The controls attribute on audio and video provides native playback UI. Relying on autoplay is affected by environment policies and user preferences.
Timed Text
Associate captions using track and WebVTT. Make spoken information accessible through a transcript as well.
Practice setup
First check the execution scope guidance on the example screen. The following environment is for extending the assignment in a separate project. Implement it yourself in a separate local project and check it with browser developer tools. Prepare HTML and any necessary image/media files in a separate folder and open them through a local HTTP server. Check with the Elements and accessibility panels and actual keyboard operation.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- In media.html, prepare a video file, captions.vtt, and a transcript.
- Connect controls and a Korean caption track to a short local video, and add a transcript link.
- Run with a video file, captions.vtt, and a transcript. Results to check: The 2 caption cues appear at their specified times. Access the transcript link when the video fails to load. Record expected and actual results separately.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Caption Path | Existing file | Nonexistent file | Pre-run hypothesis: The video will play but captions will not appear. Keep other conditions fixed and record the actual result separately after running. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- The 2 caption cues appear at their specified times.
- Access the transcript link when the video fails to load.
Self-check
- How do captions and subtitles differ?
- Does any information remain available only through sound?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
External HTTP example: provides a 6-second synthetic MP4, Korean VTT, a transcript, and switching between success/failure cases. This is a silent synthetic fixture; evaluate accessibility for actual speech with a separate video.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: dialog and Modal Flow · Next: Responsive Image Selection