joerghuelsermann.de Video Experiment HTML5

Video Experiment HTML5

Während eines Wettbewerbes im Bereich Suchmaschinenoptimierung zum Suchbegriff mammuthanull möchte ich ein Experiment mit einem Video und der Einbindung unter HTML5 mit den neuen video Element durchführen. Besonderen Wert habe ich bei der Erstellung dieser Seite auch darauf gelegt die Einbindung der Videos durch Semantik zu unterstützen.

Beispiele Videos

Nachfolgend werde ich einige Videos beispielhaft einbinden.

Angewandte Techniken im Wettbewerb mammuthanull

Das Video handelt über die Techniken mit denen ich bisher in dem Wettbewerb mammuthanull experimentiert habe.

Video angewandte mammuthanull Technik

Definition von mammuthanull

Dieses kurze Video soll den Suchbegriff mammuthanull definieren.

Video Definition von mammuthanull

Einbinden von Videos unter HTML5

Das Einbinden demonstriere ich am besten an der Grundstruktur des Kodes für den ich mich entschlossen habe. Bewusst werde ich auch nur eines der drei möglichen Videoformate anbieten. Zur Erreichung einer höheren Semantik kommen das figure und figcation Element zum Einsatz.

<video src="video.webm" controls="controls" preload="metadata" poster="video.svg">
Alternativtext
</video>
Video Grundstruktur

Der Alternativtext wird ausgegeben falls ein Browser das Video Element nicht unterstützt. Das controls Attribut gibt vor das Kontrollelemente im Browser dargesellt werden. Das preload Attribut steuert ob das Video bereits geladen werden soll. Ich habe mich dafür entschieden das ein Laden erst bei Aufruf des Videos geschehen soll. Mit dem Attribut poster gibt man ein Bild an was den Platz des Videos einnimmt. Im Grunde denke ich das ich durch den Einsatz dieser drei Attribute die Benutzerfreundlichkeit steigern kann.

Für den Platzhalter für das Video erschien mir eine SVG Datei die auch weitere Informationen über das Video beinhaltet als besonders geeignet. Einmal kommt hierbei der Gedanke das es einfacher ist diese Informationen in diesem Graphikformat zu realisieren. Dann ist der geringe Datentransfer im Vergleich zu anderen Graphikformaten zu erwähnen. Und zusätzlich der Vorteil einer variablen Größe durch diese Vektorgraphiken. Als negativen Punkt muss man die durchgehende Unterstützung der Browser in Kombination mit dem video Element nennen. Meine Vermutung ist aber das ich durch den Einsatz von SVG Dateien auch eine bessere Semantik erreiche als mit anderen Graphikformaten.

Drei Videoformate zur Auswahl

Durch den Einsatz des neuen video Elementes in HTML5 kann man drei Videoformate einbinden. Genauer gesagt an könnte alle drei anbieten. Die zwei offenen Formate werden von drei der fünf Browser in der aktuellsten Version, die ich beim Anlegen dieser Webseite getestet habe unterstützt. Dagegen wird das dritte Format nur von zwei Browsern unterstützt und eine Ankündigung für einen weiteren Browser existiert momentan. Ein weiteres Videoformat zur Verfügung zu stellen um vier der fünf Browser zu unterstützen wäre zwar eine Option. Ich habe mich aber dagegen entscheiden, weil ich keine praktischen Vorteile darin sehe ein nicht offenes Videoformat zusätzlich anzubieten.

Liste der Videoformate

Hier liste ich die drei Videoformate die zur Auswahl standen auf.

Kleine Korrektur per Hypertext access

Ich kann ja verstehen das eine Video Datei falsch von einem Browser interpretiert wird wenn als Mimetyp text(plain anstatt video/webm zurückgegeben wird. Also erweitern wir die htaccess Datei um folgenden Eintrag.

RewriteCond %{REQUEST_URI} \.webm$
RewriteRule .* - "[T=video/webm]"
htaccess Mimetyp video/webm