HTML video transcript: retain information beyond timed captions

Use case

A safety clip shows how an inspector notices a split seal. The caption track covers speech and meaningful sounds at the right times, while the transcript lets a reader scan the procedure without playing the clip and includes the visual action that the narrator never says aloud. Keep the transcript adjacent to the video and written in the same language as the clip. If the clip changes, update both timed captions and transcript; a stale transcript can describe the wrong procedure and create a safety error.

<section aria-labelledby="seal-video-title">
  <h2 id="seal-video-title">Inspecting a split parcel seal</h2>
  <video controls preload="metadata" width="720" height="405">
    <source src="/media/split-seal-I-47.webm" type="video/webm">
    <track kind="captions" src="/media/split-seal-I-47.en.vtt" srclang="en" label="English captions" default>
    <p>The inspection video is unavailable in this browser.</p>
  </video>
  <h3>Descriptive transcript</h3>
  <p>Inspector: “Check the upper seam before release.” A hand turns parcel I-47; the red seal has a visible split above the code. The inspector records the split and moves the parcel to the hold shelf.</p>
</section>

Behavioral boundary

Captions and transcripts serve different reading patterns. The text shown here is a short illustrative excerpt; a real transcript must cover the entire clip, including meaningful speech, sounds, and visual actions. Media and caption routes must exist before publication.

Cost and maintenance

A transcript adds editorial and revision cost but little runtime cost. It is searchable and usable without video playback, while the media files and caption track still dominate delivery bytes.

Common Mistakes

• Do not publish an excerpt as though it were a full transcript.
• Do not treat a caption file as a description of unspoken visual action.
• Do not let the transcript diverge when the video is re-edited.

Connected lessons

• HTML video tracks: expose controls and a caption file
• HTML track languages: label subtitles and captions honestly
• HTML video sources: declare formats and a real text alternative

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 :picture-in-picture: reflect detached video state without losing the page transcript