HTML <video>-Tag

Der <video>-Tag ist eines der HTML5-Elemente. Er dient dazu, einen Videoplayer in ein HTML-Dokument einzubetten. Diese Seite erklärt, wie man ein Video hinzufügt, mehrere Formate für browserübergreifende Unterstützung bereitstellt, Untertitel für die Barrierefreiheit hinzufügt und welche Besonderheiten bei Autoplay sowie den Attributen poster, preload und loop zu beachten sind.

Es gibt 3 weit verbreitete Videoformate für das <video>-Element: MP4/MPEG-4, WebM und Ogg. Da kein einzelnes Format in jedem Browser funktioniert, werden üblicherweise mehrere Dateien mithilfe von verschachtelten <source>-Elementen (oder einem einzelnen src-Attribut) bereitgestellt. Große Videodateien werden mit Codecs komprimiert und dekomprimiert:

MP4/MPEG-4 — H.264-Video mit AAC-Audio. Das am breitesten kompatible Format.
WebM — VP8- oder VP9-Video mit Vorbis- oder Opus-Audio.
Ogg — Theora-Video mit Vorbis-Audio.

Das <video>-Element ist ein ersetztes Element mit einem Standard-display: block. Um zu steuern, wie der Frame gefüllt wird, verwenden Sie die CSS-Eigenschaften object-fit und object-position. Um den Download- und Wiedergabefortschritt zu überwachen, verwenden Sie die Media-Event-Attribute.

Sie können Untertitel oder Beschriftungen mit dem <track>-Element und dem WebVTT-Format hinzufügen (weiter unten beschrieben). Dasselbe Element kann auch reine Audiodateien abspielen, obwohl <audio> die bessere Wahl für reinen Ton-Inhalt ist.

Syntax

Der <video>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<video>) und schließenden (</video>) Tag geschrieben.

Beispiel des HTML-`<video>`-Tags mit den Attributen controls, muted und src:

Beispiel des HTML-<video>-Tags

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video{
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4" playsinline>
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Probier es selbst »

Mehrere Quellen und Fallback-Text

Wenn Sie mehrere <source>-Elemente auflisten, spielt der Browser das erste ab, das er dekodieren kann, und ignoriert die übrigen. Ordnen Sie sie daher vom bevorzugtesten zum am wenigsten bevorzugten Format — üblicherweise WebM zuerst (kleiner), dann MP4 (am kompatibelsten) als zuverlässiger Fallback. Das type-Attribut ermöglicht es dem Browser, ein Format zu überspringen, das er nicht abspielen kann, ohne die Datei herunterzuladen.

Jeglicher Inhalt, der zwischen <video> und </video> platziert wird (außer <source> und <track>), wird nur angezeigt, wenn der Browser keine der Quellen abspielen kann. Verwenden Sie es für eine Fallback-Meldung und einen Download-Link.

Legen Sie immer width und height fest (oder fixieren Sie die Größe in CSS), damit der Browser Platz reserviert, bevor das Video geladen wird. Dadurch wird ein kumulativer Layout-Shift (CLS) verhindert, bei dem Inhalte springen, wenn der Player erscheint.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls playsinline>
      <source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
      <!-- Shown only if no source can be played -->
      Your browser doesn't support HTML video.
      <a href="/build/videos/arcnet.io(7-sec).mp4">Download the video</a> instead.
    </video>
    <p>Some information about video</p>
  </body>
</html>

Probier es selbst »

Tipp

Die Attribute controls, autoplay, loop und muted sind boolesche Attribute — sie benötigen keinen Wert. Ihre bloße Anwesenheit aktiviert die jeweilige Funktion.

Untertitel und Beschriftungen mit `<track>`

Fügen Sie für die Barrierefreiheit ein <track>-Element hinzu, das auf eine WebVTT-Datei (.vtt) verweist. Das kind-Attribut teilt dem Browser mit, wie der Text-Track behandelt werden soll:

subtitles — Übersetzungen des Dialogs für Zuschauer, die die Sprache nicht verstehen.
captions — eine Transkription des Dialogs plus wichtige Geräusche (Musik, Soundeffekte) für Zuschauer, die gehörlos oder schwerhörig sind.
descriptions — eine Textbeschreibung des visuellen Inhalts, die für Zuschauer vorgesehen ist, die das Video nicht sehen können.
chapters — Kapitelüberschriften zur Navigation durch die Mediendatei.

Das Bereitstellen von Untertiteln für voraufgezeichnete Videos erfüllt das WCAG 2.1-Erfolgskriterium 1.2.2 (Captions). Verwenden Sie srclang, um die Sprache des Tracks festzulegen, und default, um einen Track automatisch zu aktivieren.

<video width="320" height="240" controls>
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
  <track default kind="captions" srclang="en" label="English"
         src="/build/videos/arcnet.io(7-sec).vtt" />
</video>

Eine minimale WebVTT-Datei sieht so aus:

WEBVTT

00:00.000 --> 00:04.000
Welcome to the demo video.

00:04.000 --> 00:07.000
[upbeat music playing]

Autoplay (und warum `muted` erforderlich ist)

Um störende Werbung zu verhindern, blockieren die meisten Browser Autoplay mit Ton. Daher funktioniert autoplay nur zuverlässig, wenn das Video zusätzlich muted ist:

<video autoplay muted loop controls playsinline width="320" height="240">
  <source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

Warnung

Automatisch abspielende Medien können ein ernstes Barrierefreiheitsproblem darstellen — sie können Nutzer ablenken, Screenreader stören und bei Menschen mit vestibulären Störungen Probleme auslösen. Halten Sie automatisch abspielende Clips stumm, kurz und lassen Sie Nutzer die Wiedergabe am besten selbst starten. Fügen Sie immer controls ein, damit das Video pausiert werden kann.

Das `poster`-Attribut

poster legt ein Platzhalterbild fest, das angezeigt wird, bevor das Video abgespielt wird (oder bis genügend Daten geladen wurden). Ohne es zeigen Browser das erste Bild, das oft leer ist.

<video width="320" height="240" controls poster="/build/videos/cover.jpg">
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

Das `preload`-Attribut

preload gibt an, wie viel der Browser vor der Wiedergabe laden soll. Es ist nur ein Hinweis — der Browser kann ihn ignorieren (und er wird ignoriert, wenn autoplay gesetzt ist).

<!-- Don't download anything until the user presses play -->
<video controls preload="none" width="320" height="240">
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

<!-- Fetch length/dimensions only — a good default -->
<video controls preload="metadata" width="320" height="240">
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

<!-- Buffer the whole file ahead of time -->
<video controls preload="auto" width="320" height="240">
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

Das `loop`-Attribut

loop startet das Video automatisch neu, sobald es endet. Es eignet sich am besten für kurze, atmosphärische Hintergrundclips, die typischerweise mit autoplay muted kombiniert werden.

<video loop autoplay muted playsinline width="320" height="240">
  <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>

Attribute

Attribut	Wert	Beschreibung
autoplay	autoplay	Gibt an, dass das Video automatisch abgespielt wird, sobald es bereit ist.
controls	controls	Zeigt Steuerelemente an, mit denen der Nutzer die Videowiedergabe steuern kann, einschließlich Lautstärke, Spulen und Pause/Fortsetzen.
height	pixels	Legt die Höhe des Videoplayers fest.
loop	loop	Gibt an, dass das Video jedes Mal von vorne beginnt, wenn es endet.
muted	muted	Gibt an, dass das Video anfänglich stumm geschaltet ist.
poster	URL	Legt ein Bild fest, das angezeigt wird, während das Video heruntergeladen wird, oder bis der Nutzer auf die Wiedergabetaste klickt.
preload	auto, metadata, none	Gibt an, wie viel Inhalt vor der Wiedergabe geladen werden soll (siehe die Werte unten). Wird ignoriert, wenn autoplay aktiviert ist.
src	URL	Legt die URL des eingebetteten Videos fest. Stattdessen kann ein `<source>`-Element verwendet werden.
width	pixels	Legt die Breite des Players fest.

Das preload-Attribut akzeptiert drei Werte:

none — das Video sollte nicht vorgeladen werden.
metadata — nur Metadaten wie Länge und Abmessungen werden abgerufen.
auto — die gesamte Videodatei kann heruntergeladen werden.

Der <video>-Tag unterstützt auch die Globalen Attribute und die Event-Attribute.

Übungen

Übung

Wofür kann das HTML-Video-Element verwendet werden? (Alle zutreffenden Antworten auswählen)

Um Videos in HTML-Dokumente einzubettenUm einen Live-Link in HTML-Dokumente zu integrierenUm Bilder in das HTML-Dokument einzufügenUm Nutzern die Steuerung der Wiedergabe zu ermöglichen, z. B. Abspielen, Pausieren und LautstärkeUm alle CSS-Stilregeln zu ersetzen

Übung

Welche Attributkombination ermöglicht es einem Video, in modernen Browsern zuverlässig automatisch abzuspielen?

autoplay alleinautoplay zusammen mit mutedloop zusammen mit postercontrols zusammen mit preload

Syntax

Beispiel des HTML-<video>-Tags mit den Attributen controls, muted und src:

Mehrere Quellen und Fallback-Text

Untertitel und Beschriftungen mit <track>

Autoplay (und warum muted erforderlich ist)

Das poster-Attribut

Das preload-Attribut

Das loop-Attribut