<video>: controls, poster, <track>

The most-loaded HTML tag

<video controls
       poster="/poster.jpg"
       width="800" height="450"
       preload="metadata">
  <source src="/demo.mp4" type="video/mp4" />
  <source src="/demo.webm" type="video/webm" />
  <track kind="captions" src="/demo.vtt" srclang="en" label="English" default />
  Your browser doesn't support video.
</video>

Six things working at once:

• `controls` — show the native play/pause/scrub bar. Without it the user can't play the video.
• `poster` — image shown before play. Saves bandwidth (no need to download the first frame) and gives Lighthouse something to score before video starts.
• `preload` — none / metadata / auto. metadata is the sane default (length + dimensions only).
• Multiple `<source>` — provide MP4 + WebM. Browser picks the first it can decode.
• `<track>` — captions, subtitles, descriptions, chapters. Required for accessibility.
• Fallback text — shown to browsers that don't support video at all (vanishingly rare in 2026).

autoplay rules

Modern browsers REQUIRE all of:

<video autoplay muted playsinline />

• autoplay — opt in.
• muted — without this, autoplay is blocked (UX policy across all browsers).
• playsinline — required on iOS for inline (non-fullscreen) playback.

If you skip muted, your autoplay silently doesn't autoplay.

WebVTT captions

<track> points to a .vtt file. Format:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to CodeMentor.

00:00:03.000 --> 00:00:06.500
Let's get started.