html · level 2 · unit 7 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
<track> adds , and a helps everyone.
Captions are words that appear on a video in time with the sound, for people who cannot hear it or have the sound off. They live in a separate .vtt file, added with an empty <track> inside <video>.
kind="captions" says what the track holds, srclang gives its language code, label names it in the player's menu, and default turns it on from the start.
Sound on its own has nowhere to show captions, so put a transcript underneath instead: a written copy of everything said and heard.
<video controls width="640" height="360" poster="dog.svg">
<source src="puppy.mp4" type="video/mp4">
<track kind="captions" src="puppy.vtt" srclang="en" label="English" default>
</video>Press show my page to see it here.
Captions also help anyone watching in a noisy café or a quiet library.
guess first
Will these captions show from the start?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<video controls width="640" height="360">
<source src="puppy.mp4" type="video/mp4">
<track kind="captions" src="puppy.vtt" srclang="en" label="English">
</video>your turn
Your turn. Add English captions.
Fill the blanks: the track holds captions, its file is puppy.vtt, its language code is en and it is called English.
Press show my page to see it here.
- the track holds captionsnot checked yet
- it uses puppy.vttnot checked yet
- its language is Englishnot checked yet
- it has a name for the menunot checked yet
fix it
The captions are missing from the menu. Can you fix it?
Press show my page to see it here.
- the track is inside the videonot checked yet
- Is the
<track>part of the video? - A track only works inside its
<video>, next to the sources. - Move line 4 up, above
</video>, then press run.
nailed it
your videos speak to everyone. :D
- Captions show what is said, in time with the video.
<track kind="captions">adds them from a .vtt file.- Add a transcript for sound on its own.
new words in your collection
- captions
- transcript
This lesson isn’t saved. A free account remembers every lesson you finish.