HTML Grundlagen: Videos einfügen mit <video>

Video Player in die Webseite einbinden

Mit dem neuen VIDEO Tag von HTML5 lassen sich Videos ganz einfach in eine HTML Seite einbinden. Die Nutzung eines Plugins oder JavaScript Code ist bei der Lösung mit HTML5 nicht mehr notwendig. Alle aktuellen Web-Browser einschließlich der mobilen Versionen unterstützen das VIDEO Tag sehr gut. Deshalb gibt es keine Kompatibilitätsprobleme bei der Wiedergabe von Videos.

HTML <video> TagMit dem HTML VIDEO Tag lassen sich Videos oder Filme innerhalb einer HTML-Seite abspielen.

Früher unterstützten die Browser jeweils unterschiedliche Video-Formate. Mit dem HTML5 <video> Element gibt es eine Standard-Methode zum Einbinden eines Videos in eine Webseite. Leider haben die Browser-Hersteller bisher keinen gemeinsamen Standard gefunden, welche Video-Codecs eingesetzt werden sollen/dürfen/müssen.

Warum gibt es zwei verschiedene Video-Formate, die je nach Browser unterstützt werden oder nicht unterstützt werden? Damit die Sache nicht zu einfach wird, unterstützen die Browser aus lizenz-rechtlichen Gründen nur das eine oder nur das andere Format.

• MP4 – MIME-type video/mp4

• WebM – MIME-type video/webm

• Ogg – MIME-type video/ogg

Der Video-Player wird mit <video> eingeleitet und muss mit </video> abgeschlossen werden.

Füge folgenden Code in den Quellcode deiner Webseite ein, um ein Video einzubinden.

Durch das Attribut controls wird ein Kontrollfeld eingeblendet, damit der Nutzer die Bedienelemente »Play«, »Pause«, »Stop« und »Lautstärke« benutzen kann. Das Attribut controls sollte immer angegeben werden.

Das Attribut type ist notwendig, weil es verschiedene Video-Formate gibt, die je nach Browser und Browser-Version aus Lizenzgründen unterstützt werden oder nicht.

Das Video-Format MP4 wird von allen aktuellen Browsern unterstützt.

Die Video-Formate WebM und Ogg müssen nur angegeben werden, wenn auch ältere Web-Browser unterstützt werden sollen.

Weitere Attribute für den Video-Player

• Attribute width und height
  Mit diesen beiden Attributen wird die Größe in Pixel angegeben, in der das Video abgespielt werden soll. Die Angabe für »width« (= dt. Breite) und »height« (= dt. Höhe) erfolgt ohne Einheit. Die Größe sollte idealerweise mit der nativen Größe des Videos übereinstimmen.

• Attribut preload
  Mit diesem Attribut wird bestimmt, wie die Video Datei geladen werden soll. Folgende Werte sind möglich: auto, metadata, none.

  Mit preload="auto" entscheidet der Browser automatisch, was vorgeladen wird.

  Mit preload="metadata" werden nur die Metadaten ohne die eigentlichen Video-Daten (z.B. Name und Dauer) vorgeladen.

  Mit preload="none" werden keine Daten vorgeladen. Das Laden der Video-Datei beginnt erst mit einem Klick auf Play.

  Die Video-Datei sollte nicht automatisch geladen geladen werden, sondern erst durch Klick auf den »Play« Button.

• Attribut autobuffer
  Die Eigenschaft »autobuffer« ist normalerweise nicht aktiviert. Deshalb wird das Video erst durch Klick auf den »Play« Button heruntergeladen. Durch »autobuffer« wird das automatische Buffering aktiviert. Dadurch wird das Video beim Aufruf der HTML-Seite sofort vollständig geladen. Dies ist in der Regel jedoch nicht erwünscht.

• Attribut autoplay
  Die Wiedergabe der Video-Datei wird sofort nach dem Laden der Webseite gestartet. Dies kann für den Besucher der Website störend sein.

• Attribut loop
  Hiermit wird die Video-Datei in einer Endlosschleife abgespielt. Dies ist für den Besucher der Website in der Regel störend.

• Attribut volume
  Mit volume="Startwert" kann die Lautstärke auf einen beliebigen Wert zwischen 0.0 und 1.0 eingestellt werden. Es sollte für die Lautstärke kein Startwert über 0.25 (d.h. 25 Prozent) gewählt werden.

• Attribut muted
  Hiermit wird die Wiedergabe stummgeschaltet. Der Besucher muss die Lautstärke anschließend mit dem Lautstärkeregler individuell einstellen.