HTML5 – Neuer Tag <video>

Der Tag <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.

Der Tag <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 Vidoefensters 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 Sounds 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>Den Tag sound einsetzen</title>
  </head>
  <body>
    <h1>Ein Video auf der Webseite</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 den video Tag nicht.
      </video>
  </body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.