Einbindung von Videos in HTML (Mittels <video>-Tag)

Dieser Artikel beschreibt die standardisierte Methode zur Einbindung von Videoinhalten in eine HTML-Webseite. Seit der Einführung von HTML5 wird hierfür das semantische <video>-Element verwendet. Es ermöglicht die native Wiedergabe von Videos im Browser ohne die Notwendigkeit externer Plugins wie Adobe Flash (welches veraltet ist).

Grundlegende Implementierung

Das <video>-Element fungiert als Container für den Videoplayer. Die eigentliche Videodatei wird über das verschachtelte <source>-Element (oder direkt über das src-Attribut) spezifiziert.

Die empfohlene Methode nutzt das <source>-Tag, da sie die Angabe mehrerer Videoformate (Codecs) erlaubt. Der Browser wählt automatisch die erste Quelle aus, die er unterstützt.

Code-Struktur

<video controls>
  <source src="pfad/zu/deinem/video.mp4" type="video/mp4">
  <source src="pfad/zu/deinem/video.webm" type="video/webm">
  Dein Browser unterstützt das Video-Tag nicht.
</video>

<video>: Das Haupt-Element, das den Player erstellt.
<source>: Definiert die Mediendatei. Es können mehrere <source>-Elemente für verschiedene Formate (z. B. MP4, WebM, Ogg) angegeben werden.
Fallback-Text: Der Text "Dein Browser unterstützt..." wird nur angezeigt, wenn der Browser des Benutzers das <video>-Tag generell nicht interpretieren kann (heute sehr selten).

Wichtige Attribute des <video>-Tags

Das Verhalten des Players wird durch HTML-Attribute gesteuert, die direkt in das <video>-Tag geschrieben werden:

controls: (Wichtigstes Attribut) Zeigt die Standard-Benutzeroberfläche für die Steuerung an (Wiedergabe, Pause, Lautstärke, Fortschrittsbalken, Vollbild).
width / height: Setzt die Dimensionen des Players in Pixeln (z.B. width="640"). Es wird jedoch empfohlen, die Größe stattdessen flexibel mit CSS zu steuern.
autoplay: Versucht, das Video automatisch abzuspielen. Wichtig: Moderne Browser blockieren autoplay für Videos mit Ton. Es funktioniert in der Regel nur in Kombination mit muted.
muted: Schaltet das Video standardmäßig stumm.
loop: Spielt das Video nach Beendigung automatisch in einer Endlosschleife ab.
poster: Verweist auf eine Bilddatei (z.B. poster="vorschaubild.jpg"), die als Platzhalter angezeigt wird, bevor das Video geladen oder abgespielt wird.

Anpassung mit CSS (Responsives Video)

Damit ein Video auf allen Bildschirmgrößen (Desktops, Tablets, Smartphones) korrekt skaliert und seinen Container nicht "sprengt", muss es responsiv gestaltet werden. Das Video soll dabei die Breite seines Elternelements (Containers) ausfüllen, aber sein ursprüngliches Seitenverhältnis (Aspect Ratio) beibehalten.

Dies wird erreicht, indem dem Video per CSS eine Breite von 100% und eine automatische Höhe zugewiesen wird.

CSS-Beispiel

video {
  /* Das Video ist so breit wie sein Elternelement (z.B. ein <div>) */
  width: 100%;
  /* Die Höhe passt sich automatisch an, um das Seitenverhältnis zu wahren */
  height: auto;
  /* (Optional) Verhindert unerwünschte Leerräume unter dem Video */
  display: block;
}

Vollständiges Praxisbeispiel

Das folgende Beispiel integriert die Datei magico.mp4 in eine bestehende Seitenstruktur (.container). Das Video wird durch die oben gezeigte CSS-Regel responsiv gemacht.

HTML-Code (Gekürztes Beispiel)

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webseite mit Video</title>
    <style>
        /* ... (Allgemeine Seitenstile wie body, .container) ... */
        .container {
            max-width: 600px;
            width: 90%;
            margin: 0 auto;
            background: #fff;
            padding: 40px;
            border-radius: 8px;
            text-align: center;
        }
        /* --- CSS-Regel für das responsive Video --- */
        video {
            width: 100%; /* Passt sich an die .container-Breite an */
            height: auto; /* Behält das Seitenverhältnis bei */
            border-radius: 8px; /* (Optional) Passt Ecken an Container an */
            margin-top: 20px; /* (Optional) Abstand nach oben */
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Willkommen!</h1>
        <p>Dies ist deine persönliche Webseite!</p>
        <p>Hier ist ein kleines Video:</p>
       
        <!-- HTML5 Video-Einbindung -->
        <video controls>
            <source src="magico.mp4" type="video/mp4">
            Dein Browser unterstützt das Video-Tag nicht.
        </video>
       
    </div>
</body>
</html>

Erläuterung des Beispiels

Das <video>-Tag wird innerhalb des .container-Blocks platziert.
Das Attribut controls stellt die Abspielsteuerung sicher.
Die CSS-Regel video { width: 100%; height: auto; } sorgt dafür, dass das Video auf einem großen Bildschirm maximal 600px breit ist (die max-width des Containers) und auf einem Smartphone 90% der Bildschirmbreite einnimmt, ohne überzulaufen.