Dank HTML5 kann ein Video oder ein Audio-Clip genauso schnell in eine Webseite eingebunden werden, wie man es bereits von Bilddateien kennt. Dazu werden die neuen HTML5-Tags <audio> und <video> genutzt.
Innerhalb der Tags können Sie unter anderem Attribute oder eine Meldung ausgeben, falls der aktuelle Browser des Nutzers kein HTML5 unterstützt.
Video-Dateien mit HTML5 einbinden
Wenn Sie eine Video-Datei in HTML5 einbinden möchten, müssen Sie das <video> Tag benutzen.
Beispiel-Programmcode:
<video src=“DATEINAME.FORMAT“>
Ihr Browser unterstützt leider kein HTML5.
</video>
In HTML5 können für Videos verschiedene Formate eingesetzt werden. Der Internet Explorer 9 setzt auf das H.264-Format (MP4). Das Open Source Format OGG unterliegt im Gegensatz zum H.264-Format keinen rechtlichen Einschränkungen durch Patente. Dieses wird vor allem von Mozilla Firefox, Opera oder Google Chrome genutzt. Die neuen Versionen der Browser sollen auch das WebM-Format unterstützen.
Möchte man als Webseitenbetreiber also so viele Browser wie möglich unterstützen, muss das Video in mehreren Formaten eingebunden werden. Der Nachteil ist, dass man verschiedene Videodateien erstellen muss und automatisch mehr Speicherplatz benötigt.
Beispiel-Programmcode für mehrere Formate:
<video>
<source src=“DATEINAME.mp4“ type=“video/mp4“></source>
<source src=“DATEINAME.ogg“ type=“video/ogg“></source>
</video>
Dem HTML5-Tag <video> können unter anderem die Attribute „width“, „height“, „poster“, „autobuffer“, „autoplay“, „controls“ und „type“ mitgegeben werden. Zudem funktionieren natürlich noch die HTML5-Standardattribute.
Mit „width“ und „height“ können Sie die Breite und Höhe des Videos bestimmen. Mit „poster“ erscheint ein von Ihnen bestimmtes Standbild solange, bis das Video gestartet wird. Das Attribut „autoplay“ startet das Video, sobald die Webseite geladen ist. Mit „controls“ werden die Steuerelemente (Vorspulen, Lautstärke etc.) unter dem Video angezeigt und „autobuffer“ aktiviert die Zwischenspeicherung, damit das Video möglichst ruckelfrei wiedergegeben wird. „type“ enthält den MIME-Type der Datei. Dieser dient zur besseren Zuweisung an den Browser.
Beispiel-Programmcode mit Attributen für ein Video im H.264-Format in der Größe 320x240 Pixel inklusive einen Standbild, den Steuerelementen, Zwischenspeicherung und automatischen Start:
<video scr=“DATEINAME.mp4“ type=“video/mp4“ width=“320“ height=“240“ poster=“STANDBILD.jpg“ autobuffer controls autoplay>
</video>