🎬 Audio and Video Implementation

Native Media in HTML5

Before HTML5, playing a video on the web meant embedding a proprietary plugin like Flash — a source of endless security holes and crashes. HTML5 swept that away with two simple elements, <audio> and <video>, that every modern browser understands natively. They come with built-in controls, a rich set of attributes, and a JavaScript API for full control.

Both elements share the same core design: an outer tag, one or more <source> children offering the file in different formats, and fallback content for browsers that somehow can't play any of them.

The audio Element

The simplest audio player is one line — but always include controls so the user can actually play it:

<audio src="/media/theme.mp3" controls></audio>

Unlike <img>, the audio element needs a closing tag because it can hold <source> children and fallback text. Offer more than one format so every browser finds one it supports, and put a helpful message (and a download link) inside as a last resort:

<audio controls preload="metadata">
  <source src="/media/episode.mp3" type="audio/mpeg">
  <source src="/media/episode.ogg" type="audio/ogg">
  <p>Your browser can't play this audio.
     <a href="/media/episode.mp3">Download it</a> instead.</p>
</audio>

Key audio attributes

The video Element

Video works exactly like audio, with a few extra attributes for the visual dimension. Set width and height (or use CSS) and always add a poster image to show before playback:

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

Formats & Codecs

A media file is a container (like MP4 or WebM) holding streams compressed by codecs (like H.264 for video or AAC for audio). Browser support varies, which is why offering two formats is the safe strategy.

For maximum compatibility, provide MP3 + OGG for audio and MP4 + WebM for video:

<video controls width="640" height="360">
  <source src="/media/demo.webm" type="video/webm">  <!-- smaller, tried first -->
  <source src="/media/demo.mp4"  type="video/mp4">   <!-- universal fallback -->
</video>

Responsive Video

A fixed width="640" overflows a phone screen. The quickest fix is a touch of CSS:

video {
  max-width: 100%;
  height: auto;
}

To hold a video (or an <iframe> embed) at a fixed aspect ratio while it scales, the modern approach is the aspect-ratio property — now well supported:

.video-wrapper {
  aspect-ratio: 16 / 9;
  max-width: 100%;
}
.video-wrapper video,
.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

For embeds from platforms like YouTube, wrap the <iframe> in that same wrapper. Prefer the privacy-friendly domain and let the user opt in:

<div class="video-wrapper">
  <iframe
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
    title="Product demo video"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

Captions & Accessibility

Media that can't be perceived by everyone excludes people — and in many places it's a legal requirement to caption it. Accessibility here is mostly about giving text equivalents for sound and visuals.

Captions with the track element

The <track> element attaches a caption or subtitle file (in WebVTT format) to a video. Mark one as default to show it automatically:

<video controls width="640" height="360">
  <source src="/media/lesson.mp4" type="video/mp4">
  <track src="/media/lesson-en.vtt" kind="captions" srclang="en" label="English" default>
  <track src="/media/lesson-es.vtt" kind="subtitles" srclang="es" label="Español">
</video>

WebVTT — the caption file format

A WebVTT file starts with WEBVTT and lists time-stamped cues:

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to our tutorial on HTML video.

00:00:05.000 --> 00:00:09.000
In this clip we'll add captions to a video element.

Transcripts for audio

Audio has no <track>, so provide a transcript — a collapsible <details> block is a tidy pattern:

<figure>
  <audio controls>
    <source src="/media/episode.mp3" type="audio/mpeg">
  </audio>
  <figcaption>Episode 42 — Interview with Jane Smith</figcaption>
</figure>

<details>
  <summary>View transcript</summary>
  <p><strong>Host:</strong> Welcome to the show…</p>
</details>

The Media JavaScript API

Every <audio> and <video> element exposes methods, properties, and events so you can build custom controls or react to playback. The essentials: .play(), .pause(), .currentTime, .volume, and .muted.

<video id="player" width="640" height="360">
  <source src="/media/demo.mp4" type="video/mp4">
</video>
<button id="toggle" type="button">Play</button>

const video = document.getElementById('player');
const toggle = document.getElementById('toggle');

// A single play/pause button that stays in sync with the video
toggle.addEventListener('click', () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

// Keep the label correct even if the user uses native controls
video.addEventListener('play',  () => { toggle.textContent = 'Pause'; });
video.addEventListener('pause', () => { toggle.textContent = 'Play'; });
video.addEventListener('ended', () => { toggle.textContent = 'Replay'; });

Media elements fire many events — loadedmetadata, canplay, timeupdate, ended, error — that let you build progress bars, analytics, or playlists. Here's a progress readout driven by timeupdate:

video.addEventListener('timeupdate', () => {
  const pct = (video.currentTime / video.duration) * 100;
  console.log(`Watched ${pct.toFixed(0)}%`);
});

Hands-on Exercise

<div class="video-wrapper">
  <video id="player" controls poster="/media/poster.jpg" preload="metadata" playsinline>
    <source src="/media/clip.webm" type="video/webm">
    <source src="/media/clip.mp4"  type="video/mp4">
    <track src="/media/clip-en.vtt" kind="captions" srclang="en" label="English" default>
  </video>
</div>
<button id="toggle" type="button">Play</button>

.video-wrapper { aspect-ratio: 16 / 9; max-width: 100%; }
.video-wrapper video { width: 100%; height: 100%; }

const v = document.getElementById('player');
const b = document.getElementById('toggle');
b.addEventListener('click', () => v.paused ? v.play() : v.pause());
v.addEventListener('play',  () => b.textContent = 'Pause');
v.addEventListener('pause', () => b.textContent = 'Play');

WEBVTT

00:00:00.500 --> 00:00:03.000
Hello — this clip has captions.

00:00:03.500 --> 00:00:06.000
And they were added with the track element.

Summary & Quiz

📚 Further Reading

• MDN — The video element
• MDN — WebVTT and the track element
• MDN — Audio and video delivery

🚀 What's Next?

You've now covered text, links, images, and media — the full range of content elements. Next we turn to organizing tabular data cleanly and accessibly with table structure and semantics.