Media

<video> and <audio> embed media with native controls. No plugin, no library.

A Basic Video

<video src="/video.mp4" controls width="640"></video>

• controls — show play / pause / progress / volume / fullscreen
• width / height — sized like an image
• poster="/thumb.jpg" — image shown before play
• muted — required for autoplay on most browsers

Multiple Sources

Different browsers prefer different formats. Provide several:

<video controls width="640">
  <source src="/video.webm" type="video/webm" />
  <source src="/video.mp4" type="video/mp4" />
  Your browser doesn't support video.
</video>

The browser picks the first format it can play. The fallback text appears only on truly ancient browsers.

Autoplay Caveats

<video autoplay muted loop playsinline></video>

Modern browsers block autoplay with sound. To get reliable autoplay, also include muted. playsinline keeps the video in place on iOS (instead of opening fullscreen).

Captions

<video controls>
  <source src="/talk.mp4" type="video/mp4" />
  <track kind="captions" srclang="en" label="English" src="/talk.en.vtt" default />
  <track kind="captions" srclang="es" label="Spanish" src="/talk.es.vtt" />
</video>

Captions (in WebVTT format) appear in the native player. They help deaf and hard-of-hearing users — and anyone watching with the sound off.

Audio

Same idea, no width:

<audio controls src="/podcast.mp3"></audio>

Or with multiple sources:

<audio controls>
  <source src="/song.ogg" type="audio/ogg" />
  <source src="/song.mp3" type="audio/mpeg" />
</audio>

Performance

Media files are usually the biggest assets. Optimize:

• Compress with ffmpeg before publishing
• Multiple resolutions — serve smaller files to phones
• preload="metadata" to skip downloading the whole file until play

Up Next

Embedding other content with <iframe>.