Audio and Video Elements

7 min read

Native Media in the Browser

HTML5 introduced <audio> and <video> elements that let the browser play media without plugins. Both support multiple <source> children so the browser can pick the best format it supports.

html

<!-- Video with controls -->
<video width="640" height="360" controls poster="/images/thumb.jpg">
  <source src="/videos/intro.mp4" type="video/mp4" />
  <source src="/videos/intro.webm" type="video/webm" />
  <p>Your browser does not support HTML video. <a href="/videos/intro.mp4">Download it</a>.</p>
</video>

<!-- Audio with controls -->
<audio controls>
  <source src="/audio/podcast.mp3" type="audio/mpeg" />
  <source src="/audio/podcast.ogg" type="audio/ogg" />
  <p>Your browser does not support the audio element.</p>
</audio>

controls — Shows play, pause, and volume UI.
autoplay — Starts playing immediately (often blocked by browsers without muted).
loop — Repeats the media when it ends.
muted — Starts muted (required for autoplay in most browsers).
poster — An image shown before the video plays (<video> only).

Always include fallback content inside <video> and <audio> tags. Older browsers that do not support the element will display the fallback text or link instead.

Ready to test yourself?

Practice HTML— quiz & coding exercises