Audio and Video

Prerequisites: Images

HTML plays audio and video natively — no plug-ins.

Video

<video controls width="640" height="360" poster="media/intro-poster.jpg" preload="metadata">
  <source src="media/intro.webm" type="video/webm">
  <source src="media/intro.mp4" type="video/mp4">
  <track kind="captions" src="media/intro.en.vtt" srclang="en" label="English" default>
  <p>Your browser can't play this video. <a href="media/intro.mp4">Download it</a>.</p>
</video>

controls — show the browser's play/pause, volume, and full-screen buttons. Without it, there are no controls at all.
source — alternative files; the browser plays the first one it supports. MP4 (H.264) plays everywhere; WebM is often smaller.
poster — an image shown before playback.
preload="metadata" — fetch only the duration and dimensions until the user presses play (none fetches nothing; auto may fetch the whole file).
track — captions or subtitles in WebVTT format. Captions are essential for deaf and hard-of-hearing people, and for anyone watching with the sound off.
The content inside is fallback, shown only by browsers that don't support video at all.

A WebVTT captions file is plain text:

WEBVTT

00:00.000 --> 00:03.500
Welcome to Corner Bakery.

00:03.500 --> 00:07.000
Today we're making sourdough.

Autoplay

<video src="media/background.mp4" autoplay muted loop playsinline width="1280" height="720"></video>

Browsers only allow autoplay with sound off, so autoplay needs muted. playsinline stops iPhones from switching to full screen. Autoplaying motion can distract or even harm people with vestibular disorders — give a way to pause it, and don't autoplay important content.

Audio

<figure>
  <figcaption>Episode 12: Baking at high altitude</figcaption>
  <audio controls src="media/episode-12.mp3">
    <a href="media/episode-12.mp3">Download the episode (MP3)</a>
  </audio>
</figure>

Provide a transcript for podcasts and speech — for accessibility and for search engines.

Video from YouTube or Vimeo

Hosted video platforms give you an iframe embed code instead. Level 2 covers iframes and how to embed them safely and quickly.

Practice

Add a video tour.mp4 (1280×720) with controls, a poster image tour.jpg, Spanish subtitles from tour.es.vtt, and a download link as fallback.

Show solution

<video controls width="1280" height="720" poster="tour.jpg">
  <source src="tour.mp4" type="video/mp4">
  <track kind="subtitles" src="tour.es.vtt" srclang="es" label="Español">
  <a href="tour.mp4">Download the tour video</a>
</video>