Tag <video>

Tag <video>

Definition

Status: Aktueller Standard

Das Tag steht für video (Video-Datei, Film).

Das HTML-Element <video> dient dazu, Video-Dateien in HTML-Seiten einzubetten. Es ist ein semantisches Element, das in modernen Browsern unterstützt wird und eine standardisierte Methode zur Wiedergabe von Videoinhalten bietet. Um maximale Kompatibilität zu gewährleisten, nutzt man meist mehrere <source>-Tags innerhalb des <video>-Elements. Der Browser wählt automatisch das erste Format aus, das er abspielen kann.

Syntax

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Attribute

Global: Globale Attribute
controls: Standard-Interface des Browsers
autoplay: Automatische Wiedergabe
loop: Endlos-Wiedergabe
width: Breite des Video-Elements
height: Höhe des Video-Elements
poster: Bild, das als Poster angezeigt wird
track: Einbinden von Untertiteln
muted: Stummschaltung
preload: Vorladen der Datei (none/metadata/auto)

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel video

Der Code:

<video controls 
           poster="vorschaubild.jpg" 
           width="640" 
           height="360"
           preload="metadata">
        
        <!-- Videoquellen für verschiedene Browser -->
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
        
        <!-- Untertitel und Captions -->
        <!-- srclang: Sprache des Tracks | label: Anzeige im Menü -->
        <track src="video.vtt" 
               kind="subtitles" 
               srclang="de" 
               label="Deutsch" 
               default>

        <!-- Fallback für uralte Browser -->
        Ihr Browser unterstützt das Video-Tag nicht. Sie können das Video 
        <a href="docs/html/video/video.mp4">hier herunterladen</a>.
    </video>

Ergebnis:

Ergebnis: <video>-Demo 1

Beispiel-Erklärung

Anmerkungen

<audio> ohne dem Attribut "controls" aber dafür mit dem Attribut "autoplay" ist in modernen Browsern nicht mehr erlaubt, da es als störend empfunden wird, wenn Audioinhalte automatisch abgespielt werden. Es ist daher empfehlenswert, immer das Attribut "controls" zu verwenden, damit Nutzer die Kontrolle über die Wiedergabe haben.