Audio, Video and Figures

Introduction

Before HTML5, playing a video meant installing a plugin. Today the browser does it for you. In this lesson you will add sound and video to a page, and caption pictures properly.

The audio element

audio plays sound. Add the controls attribute so the visitor gets play, pause and volume buttons.

<audio controls src="song.mp3">
  Your browser does not support audio.
</audio>

The text inside is fallback content, shown only by a browser that cannot play audio.

The video element

video works the same way. You can offer several files with source elements, and the browser picks the first format it can play.

<video controls width="480" poster="cover.jpg">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  Your browser does not support video.
</video>

• poster is a picture shown before play.
• track adds captions or subtitles. Captions help deaf visitors and people watching with the sound off.

Autoplay: be careful

Browsers often block autoplay with sound, and many visitors find it annoying. Avoid autoplay unless the video is muted and truly needed.

Figure and figcaption

A figure wraps self-contained content such as an image, a diagram or a code sample. figcaption gives it a caption.

Embedding with iframe

An iframe shows another web page inside yours, for example a map or a video player.

<iframe src="https://example.com/embed" title="A short description of the embedded content" width="400" height="300"></iframe>

Always give an iframe a title, so screen reader users know what it is. Only embed sites you trust.

Try it yourself

Add a second figure to the page below with its own caption. You can reuse the same image.

Summary

• audio and video play media. Add controls, fallback text and captions with track.
• Offer several source files so every browser can play one.
• figure and figcaption caption self-contained content.
• Give every iframe a title.