Video und Audio einbinden

Zuletzt geprüft am 14. September 2026 von Daniel Weihmann

Seit HTML5 braucht es für Medien kein Zusatzprogramm mehr. Zwei Elemente genügen, und der Browser bringt die Bedienelemente mit. Die Fallstricke liegen woanders: bei den Formaten, beim Ton und bei der Frage, was passiert, wenn jemand den Film nicht sehen oder nicht hören kann.

Video einbinden

<video controls preload="metadata"
       width="1280" height="720"
       poster="/bilder/vorschau.jpg">
  <source src="/video/film.webm" type="video/webm">
  <source src="/video/film.mp4"  type="video/mp4">
  <track kind="captions" src="/video/film.de.vtt"
         srclang="de" label="Deutsch" default>
  <p>Ihr Browser kann dieses Video nicht abspielen.
     <a href="/video/film.mp4">Datei herunterladen</a>.</p>
</video>

controls: Zeigt die Bedienelemente des Browsers. Ohne dieses Attribut hat der Nutzer keine Möglichkeit, das Video zu steuern – es sei denn, eine eigene Steuerung wird per Skript gebaut.
width und height: Wie beim Bild: Die Angaben reservieren den Platz, bevor die Datei da ist. Ohne sie springt das Layout beim Laden. In CSS dann width: 100%; height: auto.
poster: Standbild vor dem Start. Ohne poster zeigen Browser unterschiedlich viel – manche den ersten Frame, manche eine graue Fläche.
preload: none lädt nichts, metadata nur Länge und Maße, auto so viel wie möglich. metadata ist fast immer richtig: Die Laufzeit steht sofort in der Leiste, und trotzdem werden keine Megabyte übertragen, die niemand abruft.
playsinline: Verhindert, dass iOS das Video automatisch in den Vollbildmodus zwingt.

Der Inhalt zwischen den Tags erscheint nur, wenn der Browser das Element nicht kennt. Dort gehört ein Ausweg hin, kein „Ihr Browser ist zu alt".

Formate

Mehrere <source> werden von oben nach unten geprüft, das erste abspielbare gewinnt. Die Reihenfolge ist also eine Prioritätsliste: das kleinere, modernere Format zuerst.

Formate für das Web
Format	type	Einordnung
MP4 (H.264)	video/mp4	läuft überall, größere Dateien – der sichere Rückfall
WebM (VP9)	video/webm	deutlich kleiner, von allen aktuellen Browsern unterstützt
MP3	audio/mpeg	der Rückfall für Ton
Opus in WebM	audio/webm	bei gleicher Qualität kleiner als MP3

Das type-Attribut ist kein Beiwerk: Ohne es lädt der Browser den Anfang jeder Datei herunter, nur um zu prüfen, ob er sie abspielen kann.

Autoplay und Ton

Autoplay mit Ton funktioniert nicht. Alle aktuellen Browser blockieren das, unabhängig vom Markup. Nur stumm startet ein Video von selbst, also nur mit muted zusätzlich zu autoplay. Wer den Ton will, braucht eine Nutzeraktion – anders geht es nicht, und keine Einstellung ändert das.

Ein Video, das von allein läuft, ist außerdem Bewegung im Sinne der Barrierefreiheit. Es braucht eine Möglichkeit zum Anhalten, sobald es länger als fünf Sekunden läuft – siehe Bewegung. Mit controls ist das erledigt.

Untertitel

<track> bindet eine WebVTT-Datei ein. Das ist reiner Text, man kann sie in jedem Editor schreiben:

WEBVTT

00:00:01.000 --> 00:00:04.000
Willkommen zur Einführung.

00:00:04.500 --> 00:00:08.000
Im ersten Schritt öffnen Sie die Datei.

kind="captions": Untertitel für Menschen, die den Ton nicht hören. Sie enthalten auch Geräusche („Tür fällt zu"), nicht nur die Sprache.
kind="subtitles": Übersetzung für Menschen, die den Ton hören, aber die Sprache nicht verstehen. Der Unterschied wird oft übersehen und ist trotzdem einer.
kind="descriptions": Beschreibung des Bildes für Menschen, die es nicht sehen.
default: Diese Spur ist von Anfang an aktiv. Nur eine Spur je kind darf das tragen.

Untertitel sind bei öffentlichen Stellen und vielen privaten Anbietern nicht optional. Die Einordnung steht unter Was rechtlich gilt.

Audio

<audio> funktioniert genauso, nur ohne Bild. Es hat kein poster, kein width und kein height.

<audio controls preload="metadata">
  <source src="/ton/folge-12.opus" type="audio/ogg; codecs=opus">
  <source src="/ton/folge-12.mp3"  type="audio/mpeg">
  <p><a href="/ton/folge-12.mp3">Folge herunterladen</a></p>
</audio>

Zu einer Tonaufnahme gehört ein Transkript. Es hilft nicht nur Menschen, die nichts hören, sondern auch allen, die lieber lesen oder etwas wiederfinden wollen – und es ist der einzige Teil der Aufnahme, den eine Suchmaschine erfassen kann.

Häufige Fehler

Nur eine große MP4-Datei. Ein 80-MB-Video ohne Vorschaubild und mit preload="auto" kostet jeden Besucher Datenvolumen, auch wenn er nie auf Start drückt.
autoplay ohne muted. Das Video startet dann gar nicht – der Browser blockiert es, und der Besucher sieht ein Standbild ohne erkennbaren Grund.
Kein controls. Ohne eigene Steuerung per Skript ist das Video unbedienbar, besonders per Tastatur.
Untertitel als eingebrannter Text im Bild. Nicht abschaltbar, nicht durchsuchbar, bei kleiner Darstellung unlesbar.
Fremdes Video per <iframe> ohne Einwilligung. Ein eingebetteter Player setzt Verbindungen zum Anbieter auf, bevor jemand auf Start drückt – dazu iframe und Einbettungen.