Challenge - Accessible video
Write a video with captions, poster and preload control.
Accessible video challenge
This challenge tests accessible video in full: the <video> container, <source> for format selection, <track> for captions, poster for the preview frame, and preload for load control.
You will build a video player with: controls for user buttons, two <source> tags (mp4 and webm), a <track kind="captions"> for English captions (with srclang and label), a poster image, and preload="metadata". Add a <p> fallback message inside <video>.
Exercise Write the accessible video player
Add a <video> to body. Give it controls, preload="metadata", and poster="/media/poster.jpg". Inside put two <source> tags: one with src="/media/promo.mp4" type="video/mp4", the other with src="/media/promo.webm" type="video/webm". Then add a <track kind="captions" srclang="en" label="English" src="/media/captions-en.vtt">. Finally add a <p> fallback: 'Your browser cannot play the video.'
Show example solution
<body>
<video controls preload="metadata" poster="/media/poster.jpg">
<source src="/media/promo.mp4" type="video/mp4">
<source src="/media/promo.webm" type="video/webm">
<track kind="captions" srclang="en" label="English" src="/media/captions-en.vtt">
<p>Your browser cannot play the video.</p>
</video>
</body>Test yourself
-
You want captions for deaf and hard-of-hearing viewers. What value goes in the track's kind attribute?
- kind="captions"
- kind="subtitles"
- kind="descriptions"
- kind="chapters"
Show answer
kind="captions" — Correct. kind="captions" carries captions for non-audible media (muted or sound-off playback).
-
Write the English captions source
<video controls preload="metadata" poster="/media/poster.jpg"> <source src="/media/promo.mp4" type="video/mp4"> <track kind="captions" ____="en" label="English" src="/media/captions-en.vtt"> <p>Your browser cannot play the video.</p> </video>Show answer
<video controls preload="metadata" poster="/media/poster.jpg"> <source src="/media/promo.mp4" type="video/mp4"> <track kind="captions" srclang="en" label="English" src="/media/captions-en.vtt"> <p>Your browser cannot play the video.</p> </video> -
Match each attribute to its role
- poster
- Preview frame image
- preload
- Load control
- controls
- User buttons
- srclang
- Caption language
- kind
- Track type