Leider bietet WebAcappella nicht die Möglichkeit, HTML5 Videos in die Seite einzubinden. Zwar kann ich über das Menü Youtube- oder flv-Videos auf einer Seite integrieren, nur ist das in meinen Augen nicht wirklich Up to date. Über den HTML-Baustein ist es jedoch kein Problem, Videos via Video-Tag HMTL5 konform einzubinden.

Hier eine kurze Anleitung und die Voraussetzungen um Videos in der Seite zu integrieren.

Vorbereitungen:

Als erstes sollte man wissen, zwar ist mit dem neuen HTML5 Video-Tag ein neuer Standard geschaffen worden, den jeder moderne Browser unterstützt, jedoch unterstützt nicht jeder Browser jedes Video-Format. Zwei Formate sind wichtig, damit das Video in den gängigen Browsern dargestellt wird.

MP4 – Videos im H.264-Format wird unterstützt von Safari, Google Chrome, iOS Geräten, Android Geräten und Internet Explorer (ab Vers. 9).

OGG – Videos im Ogg Theora Format wird unterstützt von Firefox, Opera und Google Chrome.

Die eigenen Videos müssen im Vorfeld in die oben genannten Formate umgewandelt und auf dem eigenen Server abgelegt werden. Mit dem kostenlosen Videokonverter „Adapter“ oder eigenen Programmen, können die Filme vorbereitet werden.

Das Programm kann hier http://www.macroplant.com/adapter/ heruntergeladen werden.

Leider kann es zu Problemen kommen, wenn man einen Browser verwendet, welcher eigentlich nur den OGG Standard unterstützt aber ein Plugin wie z. B. den DIVX Player installiert hat. Hier kommt es zu dem Phänomen, dass das Video doppelt abgespielt wird, wodurch ein Halleffekt entsteht. Um diese Problem zu umgehen, kann man mit einer Javascript Weiche arbeiten, die die dementsprechende Videoseite lädt. Die Vorgehensweise ist hierbei eigentlich recht simpel. Man erstellt die Hauptseite auf der das Video dargestellt werden soll, sowie zwei Unterseiten für das jeweilige Videoformat. Die Videoseite mit dem MP4 Video bindet man über eine Iframe in der Hauptseite ein. In der Seite mit dem MP4 Video, integriert man neben dem Video die Javascript Browserabfrage. Wird die Hauptseite geladen, dann lädt der Browser ebenso die MP4 Seite. Ist der Browser MP4 kompatibel bleibt alles so wie es ist und wenn nicht, wird einfach die Videoseite mit dem OGG Video automatisch im Iframe ersetzt.

Benötigte Seiten für die Einbindung:

  • Hauptseite
  • Seite mit dem MP4 Video
  • Seite mit dem OGG Video

Die Hauptseite ist eine ganz normale Seite aus meinem Projekt und hat das selbe Design wie alle anderen Seite. Die Videoseiten benötigen kein Design und sollten die selbe Grösse wie die Videos haben. Ist mein Video 640 x 480 px gross, dann verwende ich für die Seite die selben Masse.

MP4 Videoseite:

Codeeinbindung – Dieser Code kann kopiert und im HTML-Baustein eingesetzt werden:

<video width="480" height="320" controls="controls" poster="http://www.schoenwandt.info/html5/poster.jpg">
<source src="http://www.schoenwandt.info/html5/schnee480x320.mp4" type="video/mp4" />
Ihr Browser unterstützt leider nicht die neuen HTML5 Standards. Bitte verwenden Sie einen HTML5 fähigen Browser um die Seite richtig betrachten zu können!
</video>

Dieser Code kann kopiert und im HTML-Bereich in den Seiteneigenschaften eingesetzt werden:

<script>
if((navigator.userAgent.match(/Firefox/i)) || (navigator.userAgent.match(/Mozilla Firefox/i)))
{
location.href='videoogv.html';
}
</script>

OGG Videoseite:

Codeeinbindung – Dieser Code kann kopiert und im HTML-Baustein eingesetzt werden:

<video width="480" height="320" controls="controls" poster="http://www.schoenwandt.info/html5/poster.jpg">
<source src="http://www.schoenwandt.info/html5/schnee480x320.ogv" type="video/ogg" />
Ihr Browser unterstützt leider nicht die neuen HTML5 Standards. Bitte verwenden Sie einen HTML5 fähigen Browser um die Seite richtig betrachten zu können!
</video>

Zu Testzwecken kann der Code benutzt werden, sollte jedoch an die eigenen Gegebenheiten angepasst werden. Nachfolgend erkläre ich noch die einzelnen Parameter, damit jeder das Verhalten und Erscheinungsbild selber bestimmen kann.

<source src=“movie.mp4″ type=“video/mp4″ /> – Link und Typ zur Videodatei auf dem Server
<source src=“movie.ogv“ type=“video/ogg“ /> – Link und Typ zur Videodatei auf dem Server

Hinweis:
Wird ein Format vom Browser nicht unterstützt, so wird die Codezeile ignoriert und der Besucher bekommt dieses nicht mit. Der Hinweistext „Ihr Browser unterstützt….“ wird nur angezeigt, wenn der Browser überhaupt kein Format unterstützt oder den Video-Tag nicht kennt.

width=“480“ – Breite des Videos in Pixel.
height=“320″ – Höhe des Videos in Pixel.

Hinweis:
Die Größenangaben müssen für den HTML-Baustein in Web Acappella ebenfalls eingestellt werden, damit das Video richtig dargestellt wird.

poster=“http://www.schoenwandt.info/html5/poster.jpg“ – Definiert das Vorschaubild des Videos auf der Seite.

controls=“controls“ – Die Video-Steuerelemente werden angezeigt.

autoplay=“autoplay“ – Gibt an, ob das Video automatisch startet oder nicht.

loop=“loop“ – Definiert, ob das Video in einer Endlosschleife läuft.

preload=“auto“, preload=“none“ – Gibt an, ob der Film beim Laden der Seite in den Buffer geladen wird oder erst wenn der Film gestartet wird.

Hauptseite:

Um die MP4 Videoseite in der Hauptseite zu integrieren, erstellt man als erstes die Videoseiten und fügt dann über die Programmfunktion „Frame“ einen Framebaustein in dieser ein.

Bildschirmfoto 2014-02-27 um 18.17.50Anschließend verlinkt man die Videoseite mit dem Frame.

Bildschirmfoto 2014-02-27 um 18.23.18

 

Nachdem man das Frame auf die Grösse der Videoseite eingestellt und auf der Hauptseite positioniert hat, kann die Seite veröffentlicht und ausprobiert werden.

Hinweis:
Nicht jeder Parameter wird von jedem Browser unterstützt, also nicht wundern, wenn nicht alles so funktioniert wie gedacht! Die meisten Funktionen aktiviert man durch die Integration oder Weglassen im Code. Der Parameter „preload“ ist standardmäßig auf „auto“ gesetzt, also Vorladen des Videos. Möchte man dieses unterdrücken, verwendet man den Parameter im Code und setzt diesen auf „none“. Gerade bei Hostern mit Beschränkungen beim Volumen des Datentransfers, kann dieses sinnvoll sein.

Be the first to comment.

Leave a Reply