HTML5 Videos in Website einbinden
Veröffentlich am: von Andre Lanius
Die Einführung des Video-Tags in HTML5 bringt eine großartige Verbesserung mit sich. Die Zeiten, in denen Videos sicher und plattformübergreifend nur mit Flash abgespielt werden konnten, gehören der Vergangenheit an. Besonders seit dem großen Erfolg von Apples iPhone und iPad, die Flash-Inhalte überhaupt nicht unterstützen, ist es entscheidend, Videos mit dem neuen HTML5-Element einzubinden. So wird sichergestellt, dass Videos auf möglichst vielen Kombinationen von Endgeräten und Browsern verfügbar sind.
Dieses Tutorial zeigt, wie das Video-Tag integriert wird, welche Formate unterstützt werden und wie es um die Browserkompatibilität steht.
Die Syntax des HTML5-Video-Tags
Um ein Video auf einer HTML5-Website abzuspielen, müssen Sie lediglich das Video-Tag mit folgendem Code einfügen und das Video in den beiden angegebenen Formaten am entsprechenden Speicherort hinterlegen:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Ihr Browser unterstützt das Video tag nicht
</video>Die Angabe von Höhe und Breite sorgt dafür, dass der Browser bereits vor dem Laden des Videos den benötigten Platz auf der Webseite reserviert. Andernfalls würde das Element erst nachträglich entsprechend angepasst. Der Text, der zwischen den Video-Tags steht, wird nur dann angezeigt, wenn der Browser das Video-Element nicht unterstützt.
Steuerungselemente des Video-Tags
Das Attribut „controls“ fügt dem Video Steuerungselemente hinzu, mit denen Nutzer das Video abspielen, pausieren und stoppen können. Um ältere Standards zu unterstützen, sollte es in der Form „controls=“controls“ implementiert werden.
Unterstützte Videoformate
Bei den Videoformaten haben sich zwei Hauptstandards etabliert:
- MP4 mit dem H.264-Kompressionsverfahren, das von fast allen Browsern unterstützt wird, mit Ausnahme von Firefox.
- Ogg (.ogg) mit dem Theora-Codec, der von Firefox und anderen auf Open-Source-Lösungen basierenden Browsern bevorzugt wird.
Um maximale Kompatibilität zu gewährleisten, sollten Videos in beiden Formaten bereitgestellt und im source-Tag angegeben werden. Der Browser wählt automatisch das erste Format, das er verarbeiten kann.
Zusätzliche Attribute für das Video-Tag
Es gibt weitere Attribute, die als attribut="attribut" eingebunden werden können:
- autoplay: Startet das Video automatisch nach dem Laden (in der Regel nicht empfehlenswert).
- loop: Lässt das Video nach dem Ende erneut starten.
- muted: Gibt das Video ohne Ton aus.
- preload (auto|metadata|none): Bestimmt, ob und in welchem Umfang das Video beim Laden der Seite vorgeladen wird. Mit preload="none" kann dies deaktiviert werden.
- poster: Definiert ein Bild, das angezeigt wird, während das Video lädt.
Browserkompatibilität
Alle modernen Browser, einschließlich Internet Explorer ab Version 9, unterstützen das Video-Tag.
Kommentar schreiben
Anzahl der Kommentare: 0