758800

Video-Dateien in Webseiten einbinden

02.12.2010 | 10:31 Uhr |

HTML5 in Internet Explorer 9
Vergrößern HTML5 in Internet Explorer 9
© 2014

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.

HTML5 in Internet Explorer 9
Vergrößern HTML5 in Internet Explorer 9
© 2014

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>

Nehmen Sie Kontakt mit uns auf!

PC-WELT Marktplatz

758800