Einbetten von Videos: <video>

4.1 Grundlagen des <video>-Tags

Das Einbetten von Videos auf einer Webseite mit dem <video>-Element ermöglicht das Abspielen von Videoinhalten direkt im Browser. Dieses Element bietet viele Möglichkeiten zur Anpassung der Wiedergabe, inklusive der Unterstützung verschiedener Formate, Steuerung über Attribute und JavaScript-Methoden. Lass uns dieses Element genauer betrachten.

Ein einfaches Beispiel

Das <video>-Tag wird mit dem src-Attribut genutzt, das den Pfad zur Videodatei angibt. Zudem können Attribute wie controls hinzugefügt werden, um standardisierte Steuerungselemente wie Abspiel-, Pause- und Lautstärkeregler anzuzeigen.

    
      <video src="videofile.mp4" controls></video>
    
  

Beispiel mit mehreren Quellen

Um Unterstützung für verschiedene Browser zu gewährleisten, kannst du mehrere Videoquellen mit dem <source>-Tag angeben. Dadurch kann der Browser ein unterstütztes Videoformat auswählen.

    
      <video controls>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Dein Browser unterstützt das Videoelement nicht.
      </video>
    
  

Attribute des <video>-Tags

• src: gibt den Pfad zur Videodatei an
• controls: zeigt Steuerelemente für die Wiedergabe an
• autoplay: spielt das Video automatisch beim Laden der Seite ab
• loop: wiederholt die Videowiedergabe nach dem Ende
• muted: schaltet den Ton beim Laden aus
• preload: gibt an, wie der Browser das Video laden soll. Mögliche Werte: none, metadata, auto
• width und height: setzen die Breite und Höhe des Videoplayers
• poster: gibt ein Platzhalterbild an, das vor dem Beginn der Videowiedergabe angezeigt wird

4.2 Wichtige Attribute

1. Automatisches Abspielen

Das autoplay-Attribut sorgt dafür, dass die Videodatei automatisch mit der Wiedergabe beginnt, sobald die Seite geladen ist. Wie bei Audio solltest du dieses Attribut mit Bedacht verwenden, um die Benutzer nicht zu verärgern.

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. Schleifen von Videos

Das loop-Attribut gibt an, dass die Videodatei in einer Endlosschleife abgespielt werden soll. Das ist nützlich für Hintergrundvideos oder Animationen.

    
      <video src="videofile.mp4" loop></video>
    
  

3. Stummschaltung

Das muted-Attribut schaltet den Ton der Videodatei beim Laden aus. Das kann nützlich sein, wenn du möchtest, dass Videos standardmäßig ohne Ton abgespielt werden und der Benutzer den Ton bei Bedarf aktivieren kann.

    
      <video src="videofile.mp4" muted></video>
    
  

4. Vorladen

Das preload-Attribut gibt dem Browser an, wie er die Videodatei beim Laden der Seite laden soll. Es kann einen von drei Werten annehmen:

• none: der Browser soll das Video nicht vorladen
• metadata: der Browser soll nur die Metadaten laden (Dauer, Abmessungen usw.)
• auto: der Browser soll das Video vollständig laden, wenn die Seite lädt

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. Poster

Das poster-Attribut gibt ein Platzhalterbild an, das vor dem Beginn der Videowiedergabe angezeigt wird. Das kann nützlich sein, um dem Benutzer visuelle Informationen über den Videoinhalt zu geben.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 Unterstützte Videoformate

Um plattformübergreifende Kompatibilität sicherzustellen, wird empfohlen, mehrere Videoformate zu verwenden. Die am häufigsten verwendeten Formate sind MP4, WebM und OGG.

MP4-Format

MP4 (MPEG-4 Part 14) ist eines der beliebtesten Videoformate. Es wird von den meisten Browsern und Geräten unterstützt. MP4 verwendet verlustbehaftete Kompression und bietet gute Videoqualität bei relativ geringer Dateigröße.

Beispiel:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

WebM-Format

WebM ist ein offenes Video-Komprimierungsformat, das für die Nutzung im Internet entwickelt wurde. Es wird von den meisten modernen Browsern unterstützt und bietet gute Videoqualität.

Beispiel:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

OGG-Format

OGG (Ogg Theora) ist ein offenes Videoformat, das von vielen Browsern unterstützt wird. Dieses Format bietet gute Videoqualität und wird oft als Alternative zu MP4 und WebM verwendet.

Beispiel:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

Beispiel für die Verwendung mehrerer Formate zur Sicherstellung der Kompatibilität

Zur Sicherstellung der plattformübergreifenden Kompatibilität wird empfohlen, mehrere Videoquellen in verschiedenen Formaten anzugeben. Der Browser wählt das erste unterstützte Format aus.

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Dein Browser unterstützt das Videoelement nicht.
      </video>