Der Element <video> ist neu und dient zum Einbinden von Videoclips oder Streaming Video in Webseiten. Es ist ein Ersatz für die Video Funktion von Flash. Browser mit HTML5 Unterstützung können Videos somit ohne Flash wiedergeben. Das bekannteste Gerät ist das iPad von Apple, das Ostern 2010 in Deutschland auf dem Markt kommt. Weitere Browser, wie Opera V10.51, Apple Safari 4 und Firefox 3.6 und einige Handys unterstützen die Video Funktion von HTML 5.
Das Element <video>hat sieben Attribute:
- autoplay = Wenn der Wert “autoplay” eingetragen ist, dann startet der Video nachdem die Daten geladen sind.
- controls = Bei eingetragenen Wert “controls” wird die Steuerung angezeigt.
- height = Hier wird die Höhe des Videofensters in Pixel angegeben.
- loop = Wenn der Parameter “loop” eingetragen ist, dann wird der Video endlos wiederholt.
- preload = Wenn “preload” eingetragen wird, dann wird der Video zusammen mit der Webseite geladen. Dies funktioniert nur, wenn das Attribut autoplay nicht genutzt wird!
- src = Als Wert muss hier der Pfad und Dateiname des Videos angegeben werden.
- width = Hier wird die Breite des Videofensters in Pixel angegeben.
Zusätzlich können
- die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
- die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
verwendet werden.
Quellcode Beispiel:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Das HTML Element <video> einsetzen</title>
</head>
<body>
<h1>Ein Video auf der Webseite integrieren</h1>
<p>Das Video ist eingebunden</p>
<video src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv"
controls="controls">
Ihr Browser unterstützt das <video> Element nicht.
</video>
</body>
</html>
Der Element wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!