html-einfach.de

Semantisches HTML · Interaktive & Medien-Elemente

Semantische Medien: audio, video & track

Von Zuletzt geändert am

Bevor es Plugins und schwere JavaScript-Player gab, brachte HTML eigene Elemente für Ton und Bewegtbild mit: <audio> und <video>, ergänzt durch <source> und <track>. Sie sind semantisch eindeutig, bringen Bedienelemente mit und sind die Grundlage für jeden zugänglichen Media-Player.

video & audio mit controls

Das controls-Attribut liefert die nativen, barrierefreien Bedienelemente – tastaturbedienbar und beschriftet:

<video controls width="800" height="450" poster="/img/vorschau.webp">
  <source src="/video/clip.webm" type="video/webm" />
  <source src="/video/clip.mp4" type="video/mp4" />
  Dein Browser kann dieses Video nicht abspielen.
</video>

<audio controls>
  <source src="/audio/folge.mp3" type="audio/mpeg" />
</audio>

Der Text zwischen den Tags ist ein Fallback für Browser, die das Element nicht abspielen können.

source: mehrere Formate anbieten

Mit mehreren <source>-Elementen bietest du dasselbe Medium in verschiedenen Formaten an; der Browser nimmt das erste, das er versteht. So deckst du moderne (WebM, AV1) und breit unterstützte Formate (MP4) zugleich ab.

track: Untertitel und Kapitel

Das <track>-Element fügt Textspuren hinzu – der Schlüssel zur Barrierefreiheit von Video. Es kennt mehrere Arten:

kind Wofür
captions Untertitel inkl. Geräuschen (für Gehörlose)
subtitles Übersetzungs-Untertitel
descriptions textuelle Audiodeskription
chapters Kapitelmarken zur Navigation 
<video controls>
  <source src="/video/clip.mp4" type="video/mp4" />
  <track kind="captions" src="/video/clip.de.vtt" srclang="de" label="Deutsch" default />
</video>

Die Untertitel liegen als WebVTT-Datei (.vtt) vor – eine abschalt- und skalierbare Textspur, kein ins Bild gebranntes Pixel. Welche Alternativen die WCAG verlangen, vertieft Untertitel & Transkripte.

Randnotiz – Medien sind Schwergewichte. Video ist meist das größte Element einer Seite. preload="metadata" statt des ganzen Clips, feste Maße gegen Layout-Sprünge und der Verzicht auf Autoplay schonen LCP und Datenvolumen. Semantik und Performance gehen auch hier Hand in Hand.

Häufige Fehler

  • controls weggelassen ohne eigenen, vollständigen Player-Ersatz.
  • Keine <track>-Untertitel – Video ohne Textspur ist nicht zugänglich.
  • Untertitel ins Bild gebrannt statt als abschaltbare Spur.
  • Autoplay mit Ton – aufdringlich und ein WCAG-Verstoß.
  • Nur ein Exotenformat ohne breit unterstütztes Fallback.

Häufige Fragen

Brauche ich <source> oder reicht src am video?

Für ein einzelnes Format genügt src. Mehrere <source> lohnen, wenn du verschiedene Formate für beste Kompatibilität und Kompression anbietest.

Was ist WebVTT?

Ein einfaches Textformat für Untertitel und Kapitel: Zeitstempel plus Text. Es wird über <track> eingebunden und ist abschaltbar.

Wie mache ich den Player zugänglich?

Am einfachsten mit den nativen controls. Eigene Bedienelemente sind möglich, aber aufwendig – Details auf Barrierefreier Media-Player.

Fazit

<video> und <audio> mit controls, <source> für mehrere Formate und <track> für Untertitel und Kapitel bilden ein vollständiges, semantisches Medien-Set – ganz ohne fremde Player. Mit echten Textspuren statt eingebrannter Untertitel und ohne Autoplay sind sie die Basis für zugängliche Medien.