Tag <video>

Tag <video>

Definition

Status: Aktueller Standard

Das Tag <video> 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 bzw. Unterelemente

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.