Media: audio, video, figure and figcaption

Embed sound, video and captioned illustrations without any plugin.

8 min · 3 questions

HTML plays audio and video natively: no external player needed. Real-world use cases: a podcast episode on a blog, a product demo on a landing page, a tutorial embedded in documentation. Let's see how to do it properly.

HTML

<video controls width="640" poster="preview.jpg">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
  <track src="subs-fr.vtt" kind="subtitles"
         srclang="fr" label="French" default>
  Your browser doesn't support HTML5 video.
</video>

A video with fallback formats and subtitles.

Three professional takeaways. The source elements are tried in order: the browser plays the first one it can decode. The poster attribute shows a placeholder image before playback. Finally, track adds subtitles in WebVTT format: essential for accessibility and much appreciated for silent viewing.

HTML

<audio controls preload="metadata">
  <source src="podcast-ep12.mp3" type="audio/mpeg">
  <a href="podcast-ep12.mp3">Download the episode</a>
</audio>

An audio player with a downloadable fallback link.

Avoid autoplay: browsers block automatic playback with sound, and your visitors hate it when a page starts talking on its own. If you really want it for an ambient video, combine autoplay with muted, otherwise playback won't start.

To illustrate content, figure pairs a media element with its caption via figcaption. And not just images: a chart, a code snippet or a quote are also good candidates. The caption is linked to the figure programmatically, something a plain paragraph below the image can't offer.

HTML

<figure>
  <img src="chart-sales.png"
       alt="Sales up 12% in Q2 2026">
  <figcaption>
    Sales trend, second quarter of 2026.
  </figcaption>
</figure>

An image and its caption, semantically linked.

Don't mix up alt and figcaption: the alt describes the image for those who can't see it, while the caption comments on it for everyone. Avoid duplicating the same text in both - each has its own role.

Knowledge check

Make sure you remember the key points of this lesson.

Why place several source elements inside a video tag?
- To play all the videos one after another
- So the browser picks the first format it knows how to play
- To speed up downloading in parallel
Which attribute displays the play, pause and volume buttons on a video player?
- controls
- poster
- preload
- muted
What is the role of figcaption?
- Replacing the image's alt attribute
- Providing a visible caption, semantically linked to its figure
- Showing a tooltip when hovering over the image