Vorteile vom HTML5 Video-Element(<video>-Tag). HTML5 <video>-Tag ganz genau erklärt.

Vorteile vom HTML5 Video-Element(<video>-Tag). HTML5 <video>-Tag ganz genau erklärt.

Posted by ariesprodesign in Allgemein, HTML5, Internet, JavaScript, Programmierung, Technik, Webdesign 24 Mai 2014

Der Video-Tag ist eines der HTML5-Funktionen, die mehr Interesse geweckt hat. Dieses neue HTML-Element wird oft als eine Alternative für die Media Flash bezeichnet, hat aber mehr als eine Anwendung. Obwohl der junger als dem Rest der allgegenwärtigen HTML-Tags ist, hat sich ihr Potenzial und ihre Kompatibilität für allen gängigen Browsern mit einer unglaublichen Geschwindigkeit erhöht. Die natürliche Integration mit den anderen Schichten der Web-Entwicklung wie CSS und JavaScript, sowie andere HTML-Tags, ist der Hauptvorteil der Video-Tag. Nun können <video>-Elemente mit CSS formatiert werde, mit JavaScript auf <canvas> optimiert und neu dargestellt werden. Vorher waren alle Videodaten versperrt und Ihre Bits in einem Blackbox gefangen, mit HTML5 können Sie die Bits nach Belieben manipulieren.

HTML5 bietet mit seinen nativen Video- und Audioelementen und APIs ein konkurrentzfähigen, offener Standard zur Übermittlung von Multimedia im Internet.

Früher, um Videos in eine Webseite einzubinden verwendete man das <object>-Element, einen generischer Container für fremde Objekte. Dazu musste man wegen der Unstimmigkeiten unter den Browsern auf den vorher noch ungültige <embed>-Element zugreifen und viele Parameter duplizieren. Schlimmer ist noch die Tatsache, dass das Video an ein Plug-in eines Drittanbieters weitergereicht wird und Sie kennen die Nachteile von Plug-ins (der Nutzer hat das Plug-in nicht installiert und und und.)

In diesem Tutorial werde ich euch die Grundlagen der Video-Tag erklären.

HTML5-Video einbinden

Wenn in Zukunft, alle Browser eine gemeinsame Video-Format unterstützen, wird man nur dieses Code benötigen:

Bis dahin müssen Sie das Video zwei Mal codieren, einmal als Theora und ein Mal als H.264. Dann verknüpfen Sie diese Videoversionen mit dem Medienelement. Anstatt nur das Attribut src zu verwenden, müssen Sie separate <source>-Elemente verschachteln und lassen den Browser das Format herunterladen, das er selber kann.

Wenn Sie nach eine Video-Konverter suchen, kann ich Ihnen den hier empfehlen: http://www.mirovideoconverter.com/

Um das HTML-Video auf einer Website abzuspielen, müssen die folgenden Codezeilen ausreichen.

Ähnlich wie bei <object> können Sie für altere Browser, die kein HTML5-Video unterstützen, können Sie als Ausweichlösung ein Markup zwischen die Tags schreiben, zumindest einen Link, damit der User das Video runterladen kann. Zum Beispiel:

Optionale Attribute

AttributeValueBeschreibung
autoplayautoplayGibt an, dass das Video abgespielt wird, sobald es fertiggeladen ist.
controlscontrolsGibt an, dass Video-Kontrollen (wie eine Play / Pause-Taste, etc.) angezeigt werden.
heightpixelsLegt die Höhe des Video-Players
looploopDamit wird das Video in eine Schleife abgespielt
mutedmutedGibt an, dass der Audioausgang des Videos stumm geschaltet werden muss.
posterURLZeigt auf ein Bild, das der Browser währen des Video-Downloads oder bis der Nutzer das Video startet anzeigen soll
preloadauto
metadata
none
auto: Video herunterladen soweit die Seite geladen wird.
metadaten: Nur die Metadaten runterladen.
none: Erst runterladen wenn der Nutzer die Mediensteuerung aktiviert.
srcURLGibt die URL der Videodatei
widthpixelsLegt die Breite des Video-Players

 

Schreiben Sie einen Kommentar