How do I add captions and a transcript to a video in an HTML page?

Add the captions as a <track> inside the <video>, then provide the transcript separately in the page, usually immediately below the video. The kind identifies the track as captions; srclang identifies its language; and label gives people a recognizable track name. A transcript is not a second captions track: it is accompanying text that readers can read at their own pace. [S1]

Here is a starter pattern. Replace the bracketed values with your own file paths and language details:

<video controls>
  <source src="[video-file.mp4]" type="video/mp4">
  <track
    kind="captions"
    src="[captions-en.vtt]"
    srclang="en"
    label="English captions">
</video>

<section aria-labelledby="transcript-heading">
  <h2 id="transcript-heading">Video transcript</h2>
  <p>[Add the transcript text here.]</p>
</section>

The example associates an English captions file with the video and places a clearly headed transcript nearby. Keep the transcript heading and content in the page rather than treating the video’s controls as a substitute for it.

Use a WebVTT file for the timed captions and point src to that file. The label should be a plain-language name readers can recognize, such as “English captions”; srclang should identify the captions’ language, such as en for English. The kind="captions" value communicates the track’s purpose. Captions can include dialogue and relevant sound information, not just spoken words. [S1]

For example, a track might look like this:

<track kind="captions" src="[captions-en.vtt]" srclang="en" label="English captions">

Make sure the label matches the actual track and that the referenced file is the intended captions file. The markup identifies and associates a resource; it does not establish that the captions are complete or correctly timed. Check the file’s contents and playback in your chosen browser or player.

Put the transcript on the same page when practical, or place a clearly named link to it near the video. W3C WAI recommends making it easy to find from the media. [S2] A transcript should convey the spoken content and important visual information for people who cannot see the video; captions alone may leave out visual text or speaker identification. [S2]

A simple presentation could be:

<h2 id="transcript-heading">Video transcript</h2>
<p>[Speaker name]: [Spoken words.]</p>
<p>[On screen: a sign reads “[important visible text].”]</p>

Use the details that matter to understand this particular video. The transcript does not need to be synchronized with playback; that is the role of captions. WAI’s guidance also notes that applicable accessibility requirements vary with media type and conformance level, so this example alone does not determine whether a page meets a particular requirement. [S2]

Check the page as a reader would: find the video, locate its captions track, and find the transcript without searching elsewhere. Confirm the track label is meaningful, the language is correct, and the referenced file is the one you intended. Then play the video and check that captions appear in sync and include relevant sound information. Finally, read the transcript against the video for spoken content, speaker identification where useful, and important visual information.

A successful association in the HTML does not prove that every browser or player will present the track the same way. Playback and presentation can depend on the user agent and player. [S1] If a track does not appear as expected, check the file path and the player’s behavior; this guide does not establish compatibility for a particular setup.