<video>

Zuletzt aktualisiert am 3. Februar 2026

Das <video>-Element bettet ein Video direkt in deine Webseite ein: ohne Flash, ohne externe Plugins, rein mit HTML. Bevor es <video> gab (vor HTML5), brauchtest du Flash Player oder andere Plugins, um Videos im Browser abzuspielen. Heute reicht ein einziges HTML-Tag. Auf dieser Seite lernst du, wie du Videos einbindest, welche Formate funktionieren und warum Autoplay nicht immer das macht, was du erwartest.

Grundlagen

<video> ist wie ein eingebauter Videoplayer in deiner Webseite. Du gibst ihm eine Videodatei, und der Browser zeigt den Player mit Steuerungselementen an: Play, Pause, Lautstärke, Vollbild. Ohne das controls-Attribut sieht der Nutzer nur ein schwarzes Rechteck (oder das Poster-Bild) und kann das Video nicht abspielen.

• <video> ist ein Block-Element und nimmt standardmäßig die Breite seines Containers ein
• Das controls-Attribut zeigt die Steuerungselemente (Play, Pause, Lautstärke, Fortschritt, Vollbild)
• Videos können über src direkt oder über <source>-Kindelemente mit Format-Fallbacks eingebunden werden
• Das poster-Attribut zeigt ein Vorschaubild, bevor das Video geladen oder abgespielt wird
• Autoplay funktioniert nur mit muted: Browser blockieren automatisches Abspielen mit Ton, um Nutzer nicht zu belästigen
• Inhalt zwischen <video> und </video> wird als Fallback angezeigt, wenn der Browser das Element nicht unterstützt

Syntax

<video controls width="400">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Dein Browser unterstützt das Video-Element nicht.
</video>

Attribute

Beispiele

Video mit Poster-Bild

Das poster-Attribut zeigt ein Vorschaubild, solange das Video nicht gestartet wurde. Das ist wichtig für die visuelle Gestaltung der Seite. Ohne Poster sieht der Nutzer entweder ein schwarzes Rechteck oder den ersten Frame:

<video controls poster="vorschau.jpg" width="400">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Dein Browser unterstützt kein Video.
</video>

Autoplaying Background-Video

Hintergrundvideos auf Landing Pages sind beliebt. Damit Autoplay funktioniert, muss das Video stummgeschaltet sein, denn Browser blockieren automatisches Abspielen mit Ton. Dazu playsinline für iOS:

<video autoplay muted loop playsinline
       style="width: 100%; object-fit: cover;">
  <source src="background.webm" type="video/webm">
  <source src="background.mp4" type="video/mp4">
</video>

Video mit Preload-Steuerung

Mit preload steuerst du, wie viel der Browser vorab lädt. Das ist wichtig für die Performance, besonders bei Seiten mit vielen Videos:

<!-- Nichts vorab laden (spart Bandbreite) -->
<video controls preload="none" poster="vorschau.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Nur Metadaten laden (Dauer, Abmessungen) -->
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4">
</video>

Barrierefreiheit

• controls immer angeben: Ohne controls können Nutzer das Video nicht steuern: weder starten, noch pausieren, noch die Lautstärke ändern. Hintergrundvideos ohne Controls sollten rein dekorativ sein und keine wichtigen Informationen enthalten.
• Untertitel mit <track> bereitstellen: Gehörlose und schwerhörige Nutzer brauchen Untertitel. Verwende <track kind="subtitles"> für Untertitel oder <track kind="captions"> für eine vollständige Audiobeschreibung (inkl. Geräusche).
• Autoplay vermeiden oder stummschalten: Automatisch abspielende Videos mit Ton sind störend und können für Menschen mit Angststörungen belastend sein. Wenn Autoplay nötig ist, verwende immer muted.
• Poster-Bild bereitstellen: Ein aussagekräftiges Poster-Bild gibt Nutzern vor dem Abspielen einen Hinweis auf den Videoinhalt.

Häufige Fehler

Autoplay ohne muted: Das ist der häufigste Fehler. Moderne Browser blockieren Autoplay mit Ton konsequent: Das Video startet einfach nicht, und es gibt keine Fehlermeldung. Wenn du autoplay brauchst, füge immer muted hinzu.

Fehlende controls: Ohne das controls-Attribut sieht der Nutzer nur ein statisches Bild (oder ein schwarzes Rechteck) und hat keine Möglichkeit, das Video zu starten. Vergiss controls nur bei bewusst dekorativen Hintergrundvideos mit autoplay muted loop.

Kein Fallback-Content: Obwohl heute praktisch alle Browser <video> unterstützen, ist es gute Praxis, zwischen den Tags einen Fallback-Text oder einen Download-Link zu platzieren. Der Text wird nur angezeigt, wenn der Browser das Element nicht versteht.

Nur ein Videoformat: Verschiedene Browser unterstützen verschiedene Codecs. Biete mindestens MP4 (H.264) an: Das wird universell unterstützt. WebM (VP9) als zusätzliches Format verbessert die Kompression.

Browser-Kompatibilität

Das video-Element wird von allen modernen Browsern vollständig unterstützt. MP4 (H.264) funktioniert überall, WebM (VP9) in Chrome, Firefox, Edge und Opera.

Email-Kompatibilität

Video-Unterstützung in Email-Clients ist sehr eingeschränkt. Die meisten Clients blockieren eingebettete Videos aus Sicherheitsgründen.

Verwandte Elemente