0Pricing
HTML Academy · Lesson

Subtitles with track and WebVTT

Add captions and subtitles to video with track and .vtt files.

Subtitles with track and WebVTT is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Captions and Subtitles

Video accessibility requires text alternatives for audio content:

  • Subtitles — dialogue transcription, assumes viewer can hear sounds
  • Captions — dialogue + descriptions of sounds (for deaf users)
  • Audio descriptions — describes visual content for blind users

The track Element

The <track> element links a subtitle/caption file to a video:

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track
    src="tutorial-en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  >
  <track
    src="tutorial-es.vtt"
    kind="subtitles"
    srclang="es"
    label="Spanish"
  >
</video>

track Attributes

track element attributes:

  • src — path to the VTT file
  • kind — type of track (subtitles, captions, descriptions, chapters, metadata)
  • srclang — BCP 47 language code (en, es, fr...)
  • label — human-readable name shown in the CC menu
  • default — boolean; this track is shown by default

WebVTT Format

WebVTT (Web Video Text Tracks) is the subtitle file format:

WEBVTT

00:00:01.000 --> 00:00:04.000
Hello and welcome to the HTML5 tutorial.

00:00:04.500 --> 00:00:08.000
In this lesson, we'll cover the video element
and how to add subtitles.

00:00:09.000 --> 00:00:12.000
[Keyboard click sounds]
Let's look at a code example...

VTT Cue Identifiers

VTT cues can have optional identifiers:

WEBVTT

intro-1
00:00:01.000 --> 00:00:04.000
Welcome to the tutorial.

intro-2
00:00:04.500 --> 00:00:08.000
We'll cover HTML5 video today.

00:00:09.000 --> 00:00:12.000
No identifier on this cue — that is fine.

VTT Cue Settings

VTT cues support positioning settings:

WEBVTT

00:00:01.000 --> 00:00:04.000 position:10% align:left
This text is positioned at the left.

00:00:05.000 --> 00:00:08.000 line:10%
This text appears near the top.

00:00:09.000 --> 00:00:12.000 size:50% position:75%
A smaller caption on the right.

Styling WebVTT Cues with CSS

Style cue boxes with the ::cue pseudo-element:

/* Style all cues: */
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 1.2rem;
  font-family: 'Arial', sans-serif;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

/* Style specific voice tags: */
::cue(v[voice="Teacher"]) {
  color: #60a5fa;
}

track kind Values

The kind attribute specifies the purpose of the text track:

  • subtitles — translation or transcription of dialogue
  • captions — dialogue + sound descriptions for deaf users
  • descriptions — audio description of visual content for blind users
  • chapters — chapter titles for navigation
  • metadata — machine-readable data for JavaScript

Chapters Track

Use kind=chapters for video chapter navigation:

<track
  kind="chapters"
  src="chapters.vtt"
  srclang="en"
  label="Chapters"
>

<!-- chapters.vtt: -->
<!--
WEBVTT

00:00:00.000 --> 00:01:30.000
Introduction

00:01:30.000 --> 00:05:00.000
HTML Document Structure

00:05:00.000 --> 00:10:00.000
Forms and Input
-->

JavaScript TextTrack API

Access track data with the TextTrack API:

const video = document.getElementById('tutorial');
const tracks = video.textTracks;

// Enable a track:
tracks[0].mode = 'showing';  // 'hidden', 'showing', or 'disabled'

// Listen for active cue changes:
tracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) console.log('Current cue:', cue.text);
});

Metadata Track for Interactive Video

Use metadata tracks to trigger JavaScript events at specific times:

<track kind="metadata" src="interactive.vtt" id="meta-track">

<script>
video.textTracks[0].mode = 'hidden';
video.textTracks[0].addEventListener('cuechange', function() {
  const cue = this.activeCues[0];
  if (cue) {
    const data = JSON.parse(cue.text);
    // Trigger quiz, show annotation, etc.
    showAnnotation(data);
  }
});
</script>

Accessibility Requirements

WCAG requires captions for pre-recorded video:

  • Level A — captions for all pre-recorded video with audio
  • Level AA — audio descriptions for all pre-recorded video
  • Auto-generated captions (YouTube) are insufficient without review
  • Captions must be accurate, synchronized, and complete

Quick Check

What is the difference between subtitles and captions track kinds?

Recap: track and WebVTT

Subtitle and caption essentials:

  • <track src kind srclang label default> inside video
  • kind: subtitles, captions, descriptions, chapters, metadata
  • WebVTT file format: WEBVTT + timestamp --> timestamp + text
  • Style cues with ::cue CSS pseudo-element
  • WCAG requires captions for pre-recorded video

Frequently asked questions

Is the “Subtitles with track and WebVTT” lesson free?

Yes — the full text of “Subtitles with track and WebVTT” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Subtitles with track and WebVTT”?

Add captions and subtitles to video with track and .vtt files. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Subtitles with track and WebVTT” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. The audio Element src controls loop autoplay
  2. The video Element and Aspect Ratio
  3. The source Element for Multiple Formats
  4. Subtitles with track and WebVTT
← Back to HTML Academy