The video element

Definition

video embeds time-based visual media and can include audio. Native controls provide a browser and platform baseline for playback. Source and track elements describe media alternatives the browser can select.

Minimal syntax

<video controls preload="metadata" width="1280" height="720">
  <source src="/media/lesson.webm" type="video/webm" />
  <source src="/media/lesson.mp4" type="video/mp4" />
  <track
    kind="captions"
    src="/media/lesson-en.vtt"
    srclang="en"
    label="English"
    default
  />
  <p><a href="/media/lesson-transcript">Read the transcript</a>.</p>
</video>

Loading and layout

preload is a hint; browsers can choose another strategy. Intrinsic dimensions reserve aspect ratio and reduce layout movement, while CSS can make the player responsive. Provide only formats the delivery path serves with correct content types.

Accessibility

Prerecorded speech and meaningful sounds need accurate synchronized captions. A transcript improves search and flexible reading but does not replace captions for video. Content may also need audio description when important visual information is absent from the soundtrack.

Decisions and trade-offs

Avoid autoplaying sound. Native controls are preferable unless a documented requirement justifies a custom player and its keyboard, focus, naming, state, caption, and error work. Do not hide download or transcript alternatives when streaming fails.

Common failures

• Captions transcribe speech but omit important sounds or speakers.
• The player works with pointer input but not keyboard.
• Missing dimensions cause layout shift.
• Autoplay competes with screen-reader speech.
• A large source downloads before the person chooses to play.

Verification checklist

Play, pause, seek, mute, change volume, toggle captions, and exit the player by keyboard and screen reader in each supported browser. Compare captions and transcript with the media, throttle and block sources, inspect content types, and confirm fallback links remain. Test responsive layout, reduced motion, 200% zoom, and 320-pixel reflow without clipping controls.

Maintenance note

When editing or replacing the video, review captions, transcript, audio description, poster, dimensions, duration, sources, and claims as one artifact. Synchronization can become wrong even when every file still loads.

Recheck keyboard control labels and fallback links after browser or player updates, and confirm the revised edit still honors reduced-motion expectations.