0Pricing
HTML Academy · Lektion

Untertitel mit track und WebVTT

Fügen Sie Videos mit track und .vtt-Dateien Untertitel und Captions hinzu

Untertitel mit track und WebVTT ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Captions und Untertitel

Barrierefreie Videos benötigen Textalternativen für Audioinhalte:

  • Untertitel — Transkription der Dialoge; es wird vorausgesetzt, dass der Zuschauer die Geräusche hören kann
  • Captions — Dialoge plus Beschreibungen der Geräusche (für gehörlose Nutzer)
  • Audiodeskriptionen — beschreiben visuelle Inhalte für blinde Nutzer

Das track-Element

Das <track>-Element verknüpft eine Untertitel- oder Caption-Datei mit einem 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>

Attribute des track-Elements

Attribute des track-Elements:

  • src — Pfad zur VTT-Datei
  • kind — Art der Spur (subtitles, captions, descriptions, chapters, metadata)
  • srclang — BCP-47-Sprachcode (en, es, fr...)
  • label — verständlicher Name, der im CC-Menü angezeigt wird
  • default — boolescher Wert; diese Spur wird standardmäßig angezeigt

WebVTT-Format

WebVTT (Web Video Text Tracks) ist das Dateiformat für Untertitel:

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-IDs

VTT-Cues können optionale IDs enthalten:

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-Einstellungen

VTT-Cues unterstützen Einstellungen zur Positionierung:

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.

WebVTT-Cues mit CSS gestalten

Gestalten Sie Cue-Boxen mit dem Pseudoelement ::cue:

/* 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;
}

Werte des track-Attributs kind

Das kind-Attribut gibt den Zweck der Textspur an:

  • subtitles — Übersetzung oder Transkription der Dialoge
  • captions — Dialoge plus Geräuschbeschreibungen für gehörlose Nutzer
  • descriptions — Audiodeskription visueller Inhalte für blinde Nutzer
  • chapters — Kapitelüberschriften zur Navigation
  • metadata — maschinenlesbare Daten für JavaScript

Kapitelspur

Verwenden Sie kind=chapters für die Navigation durch Videokapitel:

<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

Greifen Sie mit der TextTrack-API auf Spurinformationen zu:

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);
});

Metadatenspur für interaktive Videos

Verwenden Sie Metadatenspuren, um zu bestimmten Zeitpunkten JavaScript-Ereignisse auszulösen:

<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>

Anforderungen an die Barrierefreiheit

Die WCAG verlangen Untertitel für voraufgezeichnete Videos:

  • Level A — Untertitel für alle voraufgezeichneten Videos mit Ton
  • Level AA — Audiodeskriptionen für alle voraufgezeichneten Videos
  • Automatisch generierte Untertitel (YouTube) sind ohne Überprüfung nicht ausreichend
  • Untertitel müssen korrekt, synchronisiert und vollständig sein

Kurzer Test

Was ist der Unterschied zwischen den track-Arten subtitles und captions?

Zusammenfassung: track und WebVTT

Grundlagen von Untertiteln und Captions:

  • <track src kind srclang label default> innerhalb von video
  • kind: subtitles, captions, descriptions, chapters, metadata
  • WebVTT-Dateiformat: WEBVTT + Zeitstempel --> Zeitstempel + Text
  • Cues mit dem CSS-Pseudoelement ::cue gestalten
  • Die WCAG verlangen Untertitel für voraufgezeichnete Videos

Häufig gestellte Fragen

Ist die Lektion „Untertitel mit track und WebVTT“ kostenlos?

Ja — der vollständige Text von „Untertitel mit track und WebVTT“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Untertitel mit track und WebVTT“?

Fügen Sie Videos mit track und .vtt-Dateien Untertitel und Captions hinzu Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Untertitel mit track und WebVTT“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Das audio-Element: src controls loop autoplay
  2. Das video-Element und Seitenverhältnisse
  3. Das source-Element für mehrere Formate
  4. Untertitel mit track und WebVTT
← Zurück zu HTML Academy