HTML Audio and Video

HTML can embed audio and video directly, without a third-party plugin, using the <audio> and <video> elements.

Video

<video src="myVideo.mp4" controls width="640" height="360">
  Your browser doesn't support video playback.
</video>

controls shows the built-in play/pause/volume UI. Leave it off only if you’re building fully custom controls with JavaScript, without it, there’s no obvious way for a visitor to play the video.
width and height reserve space before the video loads, avoiding layout shift, the same reasoning as sizing <img>.
The text between the opening and closing tags only shows if the browser can’t play video at all.

Multiple sources

Browsers don’t all support the same video formats. List several with <source>, and the browser uses the first one it supports:

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

Autoplay

Autoplay is disruptive and most browsers block it unless the video is also muted:

<video src="myVideo.mp4" autoplay muted loop controls></video>

Think carefully before using autoplay at all. It plays sound or motion the visitor didn’t ask for, and it’s one of the more common accessibility and usability complaints. If you use it, always pair it with muted, and give users an obvious way to pause it.

Poster image

Shows a placeholder image before the video starts playing:

<video src="myVideo.mp4" poster="preview.jpg" controls></video>

Captions

Add captions with a <track> element pointing to a WebVTT (.vtt) file:

<video src="myVideo.mp4" controls>
  <track src="captions-en.vtt" kind="captions" srclang="en" label="English" />
</video>

Captions aren’t optional polish, they’re how deaf and hard-of-hearing users access video content, and they help anyone watching in a noisy room or with the sound off (which, on the web, is most of the time).

Audio

Same pattern as video, without the visual dimensions:

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg" />
  <source src="podcast.ogg" type="audio/ogg" />
  Your browser doesn't support audio playback.
</audio>

Common mistakes

Autoplaying video or audio with sound on. Most browsers block this anyway, but it’s worth avoiding even where it’s allowed.
Shipping only one video format with no <source> fallback.
Skipping captions on any video with spoken dialogue.
Leaving off controls with no custom player built to replace it, leaving visitors with no way to interact with the media at all.

FAQ

Do I need captions for a silent video?

No, captions are for spoken audio. A silent background video (common for hero sections) doesn’t need them, though it should still have a way to pause it if it’s set to loop.

What’s the difference between <track kind="captions"> and kind="subtitles">?

Captions include non-speech sound information ("[phone ringing]"), meant for viewers who can’t hear the audio at all. Subtitles assume the viewer can hear but need a translation or transcription of the dialogue.