HTML / CSS

HTML5 Video-Tag verwenden – Tutorial

WordPress Entwickler und Webdesigner

Der HTML5 Video Tag ermöglicht es relativ einfach Videos in die eigene Webseite einzubinden, logischerweise ohne dieses Flash-Zeug von Adobe. Das wiederum bedeutet das sich diese Videos auch auf mobilen Endgeräten ohne Probleme abspielen lassen, also iPhone, iPad, iPod und auch Android Tablets und Smartphones. Nachteil an der ganzen Sache: Es funktioniert nur mit modernen Browser und es gibt kein Video Format das von allen Browsern unterstütz wird, dass heißt wenn ihr Videos wirklich in allen Browsern zur Verfügung stellen wollt müssen mindestens zwei der drei gängigen Video-Formate eingebunden werden.

W3C HTML5 Logo

Generell wird der HTML5 Video Tag von folgenden Desktop-Browsern unterstützt:

  • Internet Explorer ab Version 9
  • Mozilla Firefox ab Version 3.5
  • Google Chrome ab Version 3
  • Apple Safari ab Version 3.1
  • Opera ab Version 10.50
  • Konqueror ab Version 4.4

Ebenso funktioniert das ganze ohne Probleme in den mobilen iOS, Android und Firefox Browsern.

Anzeige:




Ein weitere wichtiger Punkt der zu beachten ist, ist die Tatsache, dass in jedem Browser ein nativer Player verwendet wird. Das heißt in jedem Browser sehen die Bedienelemente anders aus.

Wie bereits erwähnt gibt es drei wichtige Video-Standards für den HTML5 Video-Tag, von denen allerdings nicht jedes Format von jedem Browser unterstützt wird: Ogg (Theora), MPEG4 (H.264), WebM (VP8).

Hier eine kurze Liste welche Browser welches Format unterstützen:

FormatIEFirefoxOperaChromeSafari
OggNeinab 3.5+ab 10.5+ab 5.0+Nein
MPEG 4ab 9.0+NeinNeinab 5.0+ab 3.0+
WebMNeinab 4.0+ab 10.6+ab 6.0+Nein

Ihr seht also, dass es nicht möglich ist mit nur einem Video-Format alle Browser zu unterstützen, für einen umfangreichen Browser support sind mindestens zwei Formate nötig. Eine noch detailliertere Liste gibt es auf Wikipedia:

HTML5 Video Tag Formate

Glücklicherweise ist es möglich in den HTML5 Video Tag mehrere Video-Formate einzubinden um so eine Kompatibilität zu allen Browsern herzustellen, als erstes möchte ich euch jedoch die einfache Variante mit nur einem Video-Format zeigen:

<video src="video-datei.webm" controls="controls" width="300" height="150"></video>

Das ist die einfachste Variante des Video-Tags ohne Fallback und mit eingeblendeten Player-Kontrollelementen. Es ist allerdings durchaus sinnvoll noch die Breite und Höhe, ein Vorschaubild und einen Alternativtext mit einzugeben.

Ein entsprechendes Beispiel würde dann so aussehen:

<video src="video-datei.webm" poster="vorschaubild.jpg" controls="controls" width="640" height="480">
        Das hier ist ein Alternativ-Text, wenn der Video-Tag vom Browser nicht unterstütz wird.</video>

Hier nun ein Beispiel mit mehreren Video-Formaten in einem HTML5 Video Tag um alle Browser zu supporten:

<video poster="vorschaubild.jpg" controls="controls" width="640" height="480">
        <source src="video-datei.webm" type="video/webm" />
        <source src="video-datei.ogg" type="video/ogg" />
        <source src="video-datei.mp4" type="video/mp4" />
        Das hier ist ein Alternativ-Text, wenn der Video-Tag vom Browser nicht unterstütz wird.</video>

Dabei wird das src Attribut des Video Tags entfernt und innerhalb, des Video Tags entsprechende Source Einträge hinzugefügt. Dabei wird das erste Video von oben, dass kompatibel ist abgespielt.

Der HTML5 Video Tag hat allerdings noch ein paar Attribute mehr, als nur die gerade in den Beispielen gezeigten.

Folgende Attribute sind innerhalb des <video *> Tags möglich:

AttributWertBeschreibung
audiomutedWenn gesetzt, ist der Ton lautlos
autoplayautoplayWenn gesetzt, startet das Video automatisch bei Seitenaufruf
controlscontrolsWenn gesetzt, werden die Bedienelemente eingeblendet
heightHöheHöhe des Videos in px oder %
looploopWenn gesetzt, wird das Video immer wiederholt
posterPfadPfad zum Vorschaubild
preloadpreloadWenn gesetzt wird das Video bei Seitenaufruf vorgeladen
srcPfadPfad zur Video-Datei
widthBreiteWeite des Videos z.B. in px oder %

Mit diesen Beschreibungen solltet ihr den Video Tag ohne Probleme verwenden können.

Ich wünsche euch viel Spaß beim ausprobieren.

Quellen: Wikipedia, W3Schools

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

Eine Antwort zu “HTML5 Video-Tag verwenden – Tutorial”

  1. Hallo Pascal

    Super Tutorial, hat mir sehr weitergeholfen allerdings werden die Videos auf meinen Tablet ( Samsung Galaxy Note ) nur im Firefox angezeigt nicht aber im Chrome.

    VG
    Markus

Kommentar verfassen

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.