Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML video sources: declare formats and a real text alternative

Last updated: 5 Oct 20267 min read
tutorial
IntermediateBy AITrove Editorial

A video element can contain source candidates that let the browser choose a format it supports.

Use it for a real task

A receipt-training clip is encoded in two files. Source elements name each type so the browser can select a playable resource. Captions cover speech and important sounds; a nearby transcript gives another way to inspect the procedure. The source order is a preference, not a transcoding service. If neither file is playable, the fallback text should direct readers to the written instructions.

html
<section aria-labelledby="training-heading">
  <h2 id="training-heading">Receipt review training</h2>
  <video controls preload="metadata" width="640" height="360" poster="/media/review-poster-47.webp">
    <source src="/media/review-47.webm" type="video/webm">
    <source src="/media/review-47.mp4" type="video/mp4">
    <track kind="captions" src="/media/review-47.en.vtt" srclang="en" label="English">
    <p>Read the written review procedure below.</p>
  </video>
  <p>Written procedure: verify the ID, inspect the amount, then record a decision.</p>
</section>

What the markup guarantees

All local media files must be deployed together, and the captions must match the final audio. The poster is a visual cue, not a replacement for captions or the written procedure.

Cost and limits

Two encodings increase storage and delivery bytes. The browser normally fetches one chosen media stream, while metadata and poster requests still cost network time.

Common Mistakes

  • Do not assume source elements generate missing formats.
  • Do not publish captions from an older cut of the video.
  • Do not autoplay instructional media without a user request.

Connected lessons

html
media
Storage details