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.
