HTML video tracks: expose controls and a caption file

Use it for a real task

A receipt approval walkthrough includes spoken instructions. Native controls allow play and pause without a custom player. The track points to a local WebVTT file, identified as English; the transcript link provides a separate route for readers who need the content without video.

<figure>
  <video controls preload="metadata" width="640" height="360">
    <source src="/media/receipt-review.mp4" type="video/mp4">
    <track kind="captions" src="/media/receipt-review.en.vtt"
           srclang="en" label="English" default>
    Your browser cannot play this video.
  </video>
  <figcaption>Reviewing a receipt before approval.</figcaption>
</figure>
<a href="/transcripts/receipt-review">Read the walkthrough transcript</a>

What the markup guarantees

The video, caption, and transcript files are application assets that must be supplied and kept in sync. A caption track with only speech but no relevant sound cues may miss part of the experience; a transcript can include additional visual context.

Cost and limits

Video transfer can dwarf the HTML page. preload=metadata limits the initial request intent, but user agents may choose their own loading strategy. Provide a poster or multiple formats when the product needs them.

Common Mistakes

• Do not ship an empty track just to display a captions control.
• Avoid autoplaying spoken media.
• Native controls do not remove the need for accurate captions and a transcript.

Connected lessons

• HTML image alt text: describe function or information, not pixels alone
• HTML figure and figcaption: keep an asset with its explanation
• HTML iframe sandbox: isolate an embedded preview and name its purpose

Related: HTML iframe sandbox: isolate an embedded preview and name its purpose.

Continue with HTML audio: give recorded guidance native controls and a transcript.

Related: HTML video sources: declare formats and a real text alternative.

Related: HTML video poster and preload: control the first-screen transfer.

Related: HTML track languages: label subtitles and captions honestly.

Related: HTML video transcript: retain information beyond timed captions.

Apply this in HTML incident evidence project: keep a record readable when video fails.

Continue with HTML video playsinline: request inline playback without forcing autoplay.

Related CSS decisions

• CSS ::cue: improve caption contrast without editing the transcript

Related CSS decisions

• CSS :fullscreen: lay out media after the browser enters full screen

Related CSS decisions

• CSS :picture-in-picture: reflect detached video state without losing the page transcript

Continue with: Caption and transcript prompts: keep timing, speakers, and sound evidence.