CSS Tutorial und HTML Beispiele

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

HTML5 Video / Audio
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.

AttributWertBeschreibung
autoplayautoplayAutomatisches abspielen des Videos, wenn es geladen wurde.
controlscontrolsAnzeige der Funktionen zum Abspielen des Videos (Play, Pause, Stop, usw.)
heightpixelsDie Höhe des Videoplayers in Pixeln angeben
widthpixelsDie Breite des Videoplayers in Pixeln angeben
looploopDen Videoplayer veranlassen, nach dem Ende des Videos, dieser erneut abzuspielen.
mutedmutedIm Vorfeld das Video auf Stumm schalten.
posterURLAnzeige eines Hintergrundbildes, das bis zum Start des Videos gezeigt wird.
preloadauto, metadata, noneAngabe wie das Video beim Aufruf der Seite geladen werden soll.
srcURLAngaben 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.