CSS Tutorial und HTML Beispiele

CSS (Cascading Style Sheets) Basics Tutorial. Dazu Beispiele mit HTML in Verbindung mit CSS.

HTML5 Video / Audio

Dank der nun vorhandenen HTML Elemente <video> und <audio>, lassen sich mit HTML5 nun ganz einfach eigene Videos oder Audiodateien direkt auf der Webseite abspielen, ohne das dafür weitere Plug-ins benötigt werden. Voraussetzung dafür ist natürlich ein aktueller Browser, der mit den HTML5 Multimedia Elementen auch etwas anfangen kann.

HTML 5 Video

Elementspezifischen Attribute für das HTML5 Element Video.

Attribut Wert Beschreibung
autoplay autoplay Automatisches abspielen des Videos, wenn es geladen wurde.
controls controls Anzeige der Funktionen zum Abspielen des Videos (Play, Pause, Stop, usw.)
height pixels Die Höhe des Videoplayers in Pixeln angeben
width pixels Die Breite des Videoplayers in Pixeln angeben
loop loop Den Videoplayer veranlassen, nach dem Ende des Videos, dieser erneut abzuspielen.
muted muted Im Vorfeld das Video auf Stumm schalten.
poster URL Anzeige eines Hintergrundbildes, das bis zum Start des Videos gezeigt wird.
preload auto, metadata, none Angabe wie das Video beim Aufruf der Seite geladen werden soll.
src URL Angaben zur URL der Video Datei.

Dieses Beispiel zeigt, wie man mittels HTML5 ein Video auf einer Seite präsentieren kann.

<video width="500" height="300" controls="controls" autoplay loop>
    <source src="videos/html5-video.webm" type="video/webm">
    <source src="videos/html5-video.ogg" type="video/ogg">
    <source src="videos/html5-video.mp4" type="video/mp4">
    <!-- Fallback-Lösung für ältere Browser mit Flash Plug-in -->
    <embed src="videos/html5-video.swf" type="application/x-shockwave-flash">
    Schade, Ihr Browser erkennt kein HTML5 Video-Tag.
</video>

HTML 5 Audio

Die elementspezifischen Attribute für das HTML5 Element Audio, sind die selben wie bei Video. Beim HTML5 Audio-Tag fallen nur die Attribute: width, height und poster weg.

<audio controls="controls">
    <source src="audio/html5-audio.ogg">
    <source src="audio/html5-audio.mp3">
    <source src="audio/html5-audio.wav">
    <!-- Fallback-Lösung für ältere Browser mit Flash Plug-in -->
    <embed src="audio/html5-audio.swf">
    Schade, Ihr Browser erkennt kein HTML5 Audio-Tag.
</audio>

Der Embed-Tag innerhalb der Video- und Audioelemente sorgt bei dieser Variante für eine Anzeige von Video oder Audio auch bei älteren Browsern.