A photo, chart, or recording can explain an idea faster than a paragraph, but only if people can actually use it.
What You Need to Know
A transcript lets visitors read a video's spoken content and important actions without pressing Play. Place it close to the recording, and break up long transcripts with speaker names or headings.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<main>
<h1>Video lesson: The water cycle</h1>
<video controls width="640">
<source src="media/water-cycle.mp4" type="video/mp4">
<track src="media/water-cycle-captions.vtt" kind="captions" srclang="en" label="English">
</video>
<h2>Transcript</h2>
<p>Teacher: Today we will learn how water moves through the atmosphere.</p>
</main>Let’s Read the Code
- <main>: The main element marks the primary page content.
- <h1>: A top-level heading explains what the page is about.
- controls: Controls asks the browser to provide its native audio or video player controls.
- width: Width gives a preferred or intrinsic media width, depending on the element.
What the example shows: Captions appear in the video player, while the transcript lets people read the spoken content outside the player.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
Captions and transcripts are different. A captions file contains timed cues that appear during playback. A transcript is a readable written version that can stay on the page. Neither one is automatically produced simply by adding a track element.
Your Turn
Replace the media filename with your own local recording and check playback, controls, and fallback content.
Common Beginner Mistakes
- Expecting the page to run scripted behavior when the required JavaScript is missing.
- Captions and transcripts are related but not identical; complex visuals may need descriptions too.
Key Takeaways
- A transcript lets visitors read a video's spoken content and important actions without pressing Play.
- <main>: The main element marks the primary page content.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.