Français

<video>

Embedding a video, with subtitles, descriptions, and no autoplay

— 1 min read

  • HTML
  • accessibility
  • semantics
  • media

<video> + <source> + <track> — Video

The <video> element embeds a native video player. <source> offers multiple formats and <track> adds subtitles, descriptions, or chapters in WebVTT format.

When to use it

You want to embed a video hosted on your server. Always add controls so users can pause, adjust volume, and navigate. Avoid autoplay — a video that starts on its own is aggressive and problematic for people with epilepsy or using assistive technologies.

What you gain

Accessibility: <track kind="subtitles"> lets deaf users read the dialogue. <track kind="descriptions"> describes visual elements for blind users. Without <track>, your video excludes part of your audience.

Code example

<video controls width="800" height="450" preload="metadata">
  <source src="/videos/demo.mp4" type="video/mp4" />
  <source src="/videos/demo.webm" type="video/webm" />
  <track
    kind="subtitles"
    src="/videos/demo-fr.vtt"
    srclang="fr"
    label="Francais"
  />
  <track
    kind="subtitles"
    src="/videos/demo-en.vtt"
    srclang="en"
    label="English"
    default
  />
  <p>Your browser does not support the video element.</p>
</video>

Further reading