HTML-Video-Tag: die vollständige Anleitung mit Beispielen

Das Wichtigste in Kürze

• Nutzen Sie <video> mit einer MP4-Quelle (H.264/AAC); fügen Sie zuerst WebM hinzu, wenn Sie kleinere Dateien wollen.

• Fügen Sie controls, ein poster und preload="metadata" hinzu – Autoplay nur stumm und inline.

• Reservieren Sie Platz mit aspect-ratio und passen Sie das Video mit object-fit in jedes Layout ein.

• Fügen Sie für die Barrierefreiheit Untertitel mit <track> hinzu.

• Für YouTube oder Vimeo nutzen Sie deren iFrame-Player; für viele Videos eine Galerie.

Einfaches Beispiel

<video controls width="640" poster="poster.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Attribute

Responsives Video

video{width:100%;height:auto;aspect-ratio:16/9}

Untertitel

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
</video>

YouTube einzubetten ist nicht das Video-Tag

YouTube- und Vimeo-Videos lassen sich nicht mit <video> abspielen; nutzen Sie deren iFrame-Player – siehe unseren YouTube-Einbettungscode-Generator.

Der No-Code-Weg

Sie brauchen statt eines Players eine Galerie aus YouTube-, Vimeo- und gehosteten Videos? Nutzen Sie ein Widget.

Elfsight Video Gallery ausprobieren

Formate und Browser-Unterstützung

Das Video mit JavaScript steuern

const v = document.querySelector("video");
v.play();            // returns a Promise
v.pause();
v.currentTime = 30;  // seek to 0:30
v.muted = true;
v.addEventListener("ended", () => console.log("done"));
v.addEventListener("timeupdate", () => console.log(v.currentTime));

Behandeln Sie das Promise von play() – es wird abgelehnt, wenn der Browser die Wiedergabe blockiert.

Lazy Loading und Performance

• preload="none" oder "metadata" hält die erste Seite schlank.

• Ein poster-Bild erscheint sofort.

• Nutzen Sie loading="lazy" bei iFrames; bei <video> setzen Sie den src, wenn es in den sichtbaren Bereich scrollt.

• Reservieren Sie Platz mit aspect-ratio, um Layoutverschiebungen zu vermeiden.

Checkliste zur Barrierefreiheit

• Fügen Sie Untertitel mit <track kind="captions"> hinzu.

• Behalten Sie controls, sofern Sie keine eigenen barrierefreien Steuerelemente anbieten.

• Spielen Sie nie automatisch mit Ton ab.

• Stellen Sie für wichtige Videos ein Transkript bereit.

Häufige Probleme

1. 1.

   Video wird auf dem iPhone nicht abgespielt

   Fügen Sie für Autoplay playsinline und muted hinzu; prüfen Sie, ob der Codec H.264 ist.

2. 2.

   Schwarzer Bildschirm vor dem Abspielen

   Fügen Sie ein Poster-Bild hinzu.

3. 3.

   Falsche Größe auf Mobilgeräten

   Nutzen Sie width:100%; height:auto; aspect-ratio.

4. 4.

   Große Datei lädt langsam

   Komprimieren Sie sie oder streamen Sie sie von einer Videoplattform.

Wie der Browser eine Quelle auswählt

Der Browser liest die <source>-Elemente von oben nach unten und spielt das erste ab, das er unterstützt. Deshalb führen Sie das kleinere, modernere Format (WebM) zuerst auf und das universell unterstützte (MP4) an zweiter Stelle. Mit dem Attribut type kann der Browser Dateien überspringen, die er nicht abspielen kann, ohne sie herunterzuladen – geben Sie es immer an. Text, der nach den Quellen in <video> steht, zeigen nur Browser an, die Video gar nicht unterstützen.

<video controls preload="metadata" poster="poster.jpg">
  <source src="clip.webm" type='video/webm; codecs="vp9, opus"'>
  <source src="clip.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <a href="clip.mp4">Download the video</a>
</video>

Video in jedes Layout einpassen

Mit CSS steuern Sie, wie das Video seine Box füllt. object-fit: cover füllt die Fläche und beschneidet die Ränder – ideal für Hero-Bereiche. object-fit: contain zeigt das ganze Bild mit Balken. Kombinieren Sie es mit aspect-ratio, um Platz zu reservieren, bevor die Datei geladen ist, und Layoutverschiebungen zu verhindern.

.video-box{aspect-ratio:16/9;width:100%}
.video-box video{width:100%;height:100%;object-fit:cover}

/* vertical clips */
.video-vertical{aspect-ratio:9/16;max-width:360px}

Bild-in-Bild und Vollbild

Moderne Browser erlauben es, ein Video per JavaScript in ein schwebendes Fenster oder in den Vollbildmodus zu verschieben – beides braucht eine Nutzergeste wie einen Klick.

const v = document.querySelector("video");

pipButton.onclick = async () => {
  if (document.pictureInPictureElement) await document.exitPictureInPicture();
  else await v.requestPictureInPicture();
};

fullButton.onclick = () => v.requestFullscreen();

Fügen Sie dem Element disablepictureinpicture hinzu, wenn Sie die eigene PiP-Schaltfläche des Browsers nicht möchten.

Video-Interaktion messen

Das Video-Element löst Ereignisse aus, die Sie an Ihr Analytics-Tool senden können. Erfassen Sie Starts, Abschlüsse und Fortschrittsmarken – nicht jedes timeupdate, das mehrmals pro Sekunde ausgelöst wird.

const v = document.querySelector("video");
const sent = new Set();
const track = (name) => window.gtag && gtag("event", name, { video_title: v.dataset.title });

v.addEventListener("play", () => track("video_start"), { once: true });
v.addEventListener("ended", () => track("video_complete"));
v.addEventListener("timeupdate", () => {
  const p = Math.floor((v.currentTime / v.duration) * 4) * 25; // 25, 50, 75
  if (p && p < 100 && !sent.has(p)) { sent.add(p); track("video_progress_" + p); }
});

Video-Tag, iFrame oder Galerie?

Das Video-Tag ist das richtige Werkzeug für Ihre eigenen kurzen Dateien: Produktschleifen, Hero-Hintergründe, kurze Erklärvideos, die Sie auf einem CDN hosten. Für Videos auf YouTube oder Vimeo nutzen Sie deren iFrame-Player – sie übernehmen Streaming, Qualitätswechsel und Untertitel. Wenn Sie viele Videos, sich selbst aktualisierende Feeds oder eine Mischung aus Plattformen brauchen, erspart Ihnen ein Galerie-Widget, Playlists, Popups und Layouts von Hand zu bauen.