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

Use it in a concrete workflow

An inspection archive includes a recording below the case summary. A poster gives the reader a relevant still without requiring immediate video playback, and preload=none avoids pulling the full recording just because the page opened. Controls remain available to start it. The recording and poster still need owned assets, useful surrounding context, and a text alternative for information the video conveys.

<h2>Inspection I-47 recording</h2>
<video controls preload="none" poster="/media/I-47-still.webp" width="640" height="360">
  <source src="/media/I-47-recording.mp4" type="video/mp4">
  <p>Video playback unavailable. Request the inspection transcript from the case team.</p>
</video>

Behavior and ownership

Preload is a hint, not a strict byte cap. The browser may fetch metadata or ignore the requested policy under some conditions. A poster is not a transcript, and the fallback paragraph is not timed captioning.

Performance and maintenance

The poster adds an image request, usually smaller than the video. Measure total page transfer and lazy loading on the actual archive route; a large poster can erase the benefit of deferring video data.

Common Mistakes

• Do not autoplay an evidence recording by default.
• Do not assume preload=none guarantees zero media bytes.
• Do not treat a still frame as an accessible alternative to the recording.

Connected lessons

• HTML video tracks: expose controls and a caption file
• HTML video sources: declare formats and a real text alternative
• HTML image loading: distinguish a key image from below-fold media

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