Ausführbare HTML-Docs: HTML Video

Q: Wie füge ich in HTML ein Video ein?

Mit . Das Attribut controls zeigt den Play-Button, die Zeitleiste und die Lautstärke des Browsers. Ohne es zeigt das Video sein erstes Bild (oder das poster), und der Nutzer kann es nicht starten.

Q: Warum funktioniert autoplay bei meinem Video nicht?

Browser blockieren Autoplay mit Ton. Füg neben autoplay auch muted hinzu und playsinline, damit iPhones es in der Seite statt im Vollbild abspielen: .

Q: Wie füge ich einem Video ein Vorschaubild hinzu?

Mit dem Attribut poster und einer Bild-URL: . Das Bild wird angezeigt, bis das Video startet.

Q: Wie füge ich einem HTML-Video Untertitel hinzu?

Füg in das Video ein ein. Die Datei verwendet das Format WebVTT, und der Browser zeigt in seinen Steuerelementen einen Button für Untertitel.

Q: Wie mache ich ein Video responsiv?

Setz im CSS width: 100% und height: auto (oder max-width: 100%). Das Video skaliert mit seinem Container und behält sein Seitenverhältnis.

So fügst du ein Video ein

Lass das <video>-Element auf eine Videodatei zeigen und füg controls hinzu, damit der Leser es abspielen kann:

<video src="movie.mp4" controls width="640"></video>

controls zeigt den eigenen Player des Browsers: Abspielen und Pause, eine Zeitleiste, Lautstärke und Vollbild. Ohne das Attribut steht das Video einfach nur da. Diese Vorschau kann keine Videodateien laden, deshalb speisen die Beispiele auf dieser Seite das Element aus einer kleinen Canvas-Animation, die ein Skript zeichnet; die Attribute funktionieren genau wie mit einer Datei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

Weil die Quelle ein Livestream und keine Datei ist, lässt sich die Zeitleiste hier nicht ziehen, und es gibt keine feste Länge. Mit einer echten .mp4 bekommt derselbe Player eine vollständige Suchleiste.

Video-Attribute

Attribut	Was es macht
`controls`	Zeigt die Steuerelemente des Browser-Players
`autoplay`	Startet die Wiedergabe, sobald es geht (in der Praxis nur mit `muted`)
`muted`	Startet ohne Ton
`loop`	Beginnt am Ende wieder von vorn
`playsinline`	Spielt auf dem iPhone in der Seite ab, statt in den Vollbildmodus zu wechseln
`poster="thumb.jpg"`	Bild, das angezeigt wird, bevor das Video läuft
`preload`	`none`, `metadata` (nur Größe und Länge) oder `auto` (der Browser entscheidet, wie viel er herunterlädt)
`width`, `height`	Größe in Pixeln; wenn du beides setzt, wird der Platz reserviert, bevor das Video lädt

autoplay, muted und loop

Browser blockieren Videos, die von selbst mit Ton starten. Ein stummgeschaltetes Video darf automatisch starten; so funktionieren Hintergrundvideos und kurze Clips in Schleife:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

Die vier Attribute gehören zusammen: autoplay zum Starten, muted, damit der Browser es erlaubt, loop für einen Clip und playsinline, damit iPhones ihn nicht im Vollbild öffnen. Automatisch startende Videos mit Ton werden nicht nur blockiert, sie sind auch ein Problem für Screenreader-Nutzer, deren Sprachausgabe übertönt wird. Wenn ein Clip länger als fünf Sekunden läuft, gib den Leuten eine Möglichkeit, ihn anzuhalten.

Vorschaubild und preload

poster zeigt ein Bild, bevor das Video läuft, wie ein Vorschaubild. Hier hat das Video gar keine Quelle, das poster ist also alles, was es zu sehen gibt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

Mit preload="none" lädt der Browser nichts herunter, bis der Leser auf Play drückt, und das poster sorgt dafür, dass die Fläche nicht leer aussieht. Nimm preload="metadata", wenn die Dauer schon vor dem Abspielen sichtbar sein soll. Ohne poster zeigen die meisten Browser das erste Bild, sobald sie es geladen haben.

Formate und Fallbacks mit source

Statt src kannst du mit <source>-Elementen mehrere Dateien aufführen. Der Browser spielt die erste ab, die er unterstützt:

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

MP4 mit H.264-Video läuft in jedem aktuellen Browser und ist deshalb die sichere Wahl, wenn du nur eine Datei hast. Mit dem Attribut type kann der Browser Formate überspringen, die er nicht abspielen kann, ohne sie herunterzuladen. Der Text am Ende erscheint nur in Browsern, die <video> überhaupt nicht unterstützen.

Untertitel mit track

<track kind="captions"> lädt eine WebVTT-Datei, eine einfache Textdatei mit zeitgesteuerten Zeilen. Der Browser fügt seinen Steuerelementen einen Button für Untertitel hinzu und zeichnet den Text über das Video:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

Untertitel helfen gehörlosen und schwerhörigen Zuschauern, Menschen, die ohne Ton schauen, und allen, die einem Video in einer Zweitsprache folgen. Füg einem Track default hinzu, damit er ohne Klick angezeigt wird. Eine Untertiteldatei von einer anderen Domain braucht CORS-Header und crossorigin am Video.

Mit JavaScript stylen und steuern

Ein Video ist wie ein Bild ein ersetztes Element: width: 100% mit height: auto macht es responsiv, und object-fit entscheidet, wie es einen Kasten mit anderer Form füllt. JavaScript bekommt play(), pause(), currentTime, volume und Events wie play, pause und ended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play() gibt ein Promise zurück, das abgelehnt wird, wenn der Browser die Wiedergabe blockiert (zum Beispiel Autoplay mit Ton), Produktionscode sollte es also mit catch abfangen. Eigene Steuerelemente zu bauen ist optional; die eingebauten controls sind per Tastatur bedienbar und übersetzt, was eigene Buttons erst nachbauen müssen. Videos, die auf YouTube oder Vimeo liegen, bettest du stattdessen mit deren Player über ein iframe ein.

Häufige Fehler

Autoplay ohne muted. Der Browser blockiert es. Füg muted und playsinline hinzu.
controls vergessen. Solange du keine eigenen baust, hat der Leser keine Möglichkeit, das Video zu starten.
Kein width und height. Die Seite springt, wenn das Video lädt. Setz beides und skaliere dann mit CSS.
Riesige Dateien. Komprimiere Videos fürs Web und nimm preload="none" oder "metadata" für Videos weiter unten auf der Seite.
Keine Untertitel bei Videos mit Sprache. Füg ein <track kind="captions"> hinzu.

Häufig gestellte Fragen

Wie füge ich in HTML ein Video ein?

Mit <video src="movie.mp4" controls width="640"></video>. Das Attribut controls zeigt den Play-Button, die Zeitleiste und die Lautstärke des Browsers. Ohne es zeigt das Video sein erstes Bild (oder das poster), und der Nutzer kann es nicht starten.

Warum funktioniert autoplay bei meinem Video nicht?

Browser blockieren Autoplay mit Ton. Füg neben autoplay auch muted hinzu und playsinline, damit iPhones es in der Seite statt im Vollbild abspielen: <video autoplay muted loop playsinline>.

Welches Videoformat soll ich im Web verwenden?

MP4 mit H.264-Video läuft in jedem aktuellen Browser und ist daher der sichere Standard. Du kannst mit <source> zuerst eine kleinere WebM-Datei aufführen und den Browser das erste Format wählen lassen, das er unterstützt.

Wie füge ich einem Video ein Vorschaubild hinzu?

Mit dem Attribut poster und einer Bild-URL: <video poster="thumb.jpg" controls>. Das Bild wird angezeigt, bis das Video startet.

Wie füge ich einem HTML-Video Untertitel hinzu?

Füg in das Video ein <track kind="captions" src="captions.vtt" srclang="en" label="English"> ein. Die Datei verwendet das Format WebVTT, und der Browser zeigt in seinen Steuerelementen einen Button für Untertitel.

Wie mache ich ein Video responsiv?

Setz im CSS width: 100% und height: auto (oder max-width: 100%). Das Video skaliert mit seinem Container und behält sein Seitenverhältnis.

Verwandte Konzepte