Zur Einbettung von Videofilmen in eine Webseite bestehen ganz unabhängig von Contao zahlreiche Möglichkeiten. Man kann eines der vorhandenen Portale wie YouTube nutzen und dann deren Angebot zur Einbettung von speziellen Codes nutzen, man kann ebenso einen der zahlreichen verfügbaren Flashplayer in Contao integrieren und muss dazu meist auch eine entsprechende Kopie der Player-Anwendung auf dem eigenen Webserver installieren. So werden die Abrufstatistiken der eigenen Videos nicht Dritten preisgegeben.

Gerade neuere Browser bieten eine weitere Alternative, welche komplett auf die Einbindung eines Flash-Players verzichtet und stattdessen die Fähigkeit des Browsers nutzt, selbst Videos eingebettet wiederzugeben. Diese mit dem neuen Standard HTML5 eingeführte Methode erfreut sich zunehmender Beliebtheit und kann obendrein durch eine Unterstützung von mobilen Endgeräten wie Apple's iPhone und iPad punkten. Der Nachteil dieser Lösung zeigt sich in der Vielfalt der Formate, in der Sie ein Video fortan anbieten müssen.

Die hier vorgestellte Erweiterung für das CMS Contao ermöglicht Ihnen die Nutzung des auch für kommerzielle Zwecke lizenzkostenfrei verfügbaren Flash-Videoplayers der Firma Interlake Media. Dieser wird bei Bedarf vom Server des Anbieters direkt durch den Besucher Ihrer Site heruntergeladen. Die Videodateien selbst werden in der Dateiverwaltung Ihrer Website gespeichert. Sind dort neben der Flash-Variante Ihres Videos auch weitere, für die HTML5-basierte Wiedergabe geeignete Videodateien vorhanden, so wird die Einbettung automatisch um diese Funktion erweitert. Dadurch können Sie schnell und einfach Videos einbetten, die auf nahezu allen Endgeräten abspielbar sind.

Installation der Erweiterung

  1. Melden Sie sich in Contao als Administrator an und öffnen Sie den Erweiterungskatalog. Dort finden Sie die Erweiterung bspw. unter dem Stichwort Video oder wenn Sie gezielt nach Interlake suchen.
  2. Wählen Sie in der Ergebnisliste die Erweiterung mit dem Namen "Interlake VideoPlayer", indem Sie auf den Namen in der Liste klicken. Dadurch erhalten Sie die Detailseite. An deren Ende klicken Sie auf Installieren.
  3. Sie gelangen zur Installationsseite der Erweiterung. Da für die Nutzung kein Lizenzschlüssel erforderlich ist, können Sie die Installation nun durch Klicken der Schaltfläche am unteren Rand der Ansicht starten. Sobald die Dateien heruntergeladen und auf ihrem Webserver installiert wurden, wird dies durch eine entsprechende Anzeige am Ende der Installationsseite angezeigt. Achten Sie auf Fehlermeldungen.
  4. Klicken Sie für den Abschluss der Installation auf Weiter. Der Erweiterungsmanager von Contao prüft nun die Aktualität der Datenbank und wird diese nach einem weiteren Klick gegebenenfalls auf den neuesten Stand bringen.
  5. Sie gelangen danach zur Erweiterungsliste, in der nun auch der Interlake VideoPlayer gelistet sein sollte. Damit ist die Installation abgeschlossen.

Anwendung

Schritt 1: Video vorbereiten

Natürlich müssen Sie zuerst das Video für die Wiedergabe im Internet aufbereiten. Weil die hier gezeigte Lösung nicht auf das Streaming des Videos setzt, muss ein Besucher Ihrer Website die entsprechende Videodatei zur vollen Anzeige komplett herunterladen. Zum einen bedeutet dies, dass Sie keine Inhalte einstellen sollten, die nicht vervielfältigt werden dürfen. Andererseits sollten Sie aber gemessen am Stand der Netzwerktechnik die Bandbreite eines Besuchers und auch das hohe Aufkommen an Datenverkehr und die für sie eventuell daraus folgenden Kosten berücksichtigen und die Dateien durch Downsampling in ihrer Qualität und damit auch in ihrer Größe angemessen reduzieren. Üblicherweise werden Videos auch nicht in den hier typischen Formaten erstellt, weshalb ohnehin eine Konvertierung des Videos erforderlich ist.

Basisformat: Flash Video (FLV)

Für die Wiedergabe Ihres Videos im Interlake Videoplayer muss dieses im FLV-Format vorliegen. Dieses Format ist spezifisch für Adobe Flash, welches für die Funktion des Interlake Videoplayers zwingend erforderlich ist, also vom Besucher Ihrer Site installiert werden muss. Die Konvertierung in das FLV-Format ist mit verschiedenen Programmen möglich, etwa dem Adobe Media Encoder.

Optionen für HTML 5

Im HTML5-Standard ist die direkte Benennung einer Videodatei zur nativen Wiedergabe im Browser vorgesehen. Mehrere aktuelle Browser unterstützen schon heute diesen Standard, nur leider mit unterschiedlichen Formaten. Doch auch dieses Problem wurde in Grundzügen vom HTML5-Standard berücksichtigt und man gibt zur Videodatei immer auch das Format des Videos mit an, so dass ein Browser ohne Zugriff auf die Videodatei entscheiden kann, ob er die Wiedergabe nach HTML5-Standard schafft oder nicht. Ebenso können dadurch mehrere Videodateien gleichzeitig benannt werden, von denen diejenige vom Browser gewählt wird, welche er auch wiedergeben kann.

Die Erweiterung Interlake Videoplayer für Contao nutzt diese Möglichkeit und kombiniert die Einbettung des Interlake VideoPlayers mit weiteren Angaben von Videodateien nach HTML5-Standard, sofern diese in Ergänzung zur FLV-Videodatei im CMS hinterlegt wurden.

Prinzipiell sollte man für eine breite Unterstützung der HTML5-Videowiedergabe auf alle nachfolgend genannten Formate setzen. Der Vorteil dieser Wiedergabe liegt in der geringeren Bandbreite und Ressourcenlast beim Besucher, da weder Flash in die Seite integriert noch der Interlake Videoplayer gesondert vom Anbieter heruntergeladen werden muss.

Damit die Datei erkannt wird, muss die Erweiterung des Dateinamens .flv lauten. Ein Beispiel für einen passenden Dateinamen wäre werbespot.flv. Die Kleinschreibung der Erweiterung ist dabei entscheidend.

H264

Das Videoformat H264 wird derzeit im Apple Safari ab Version 3.1 (auch auf iPhone/iPad), von Google's Chrome ab Version 3.0 und dem derzeit noch nicht veröffentlichten Microsoft Internet Explorer 9 unterstützt.

Zur korrekten Erkennung dieses Formats muss eine Datei die Erweiterung .mp4 tragen, also zum obigen Beispiel passend werbespot.mp4 heißen. Die Kleinschreibung der Erweiterung ist dabei entscheidend.

Beim Erstellen eines geeigneten Videos sollte neben dem Format auch auf das Profil und damit auch die Größe der Datei geachtet werden. Nicht jedes H264-kodierte Video wird in jedem Browser abgespielt, der grundlegend dieses Format auf der Liste seiner unterstützten Formate hat.

Ogg-Theora

Auf das aus dem OpenSource-Bereich stammende Format Ogg-Theora setzt der Mozilla Firefox ab Version 3.5. Auch Google's Chrome ab Version 3.0 und Opera ab Version 10.5 unterstützen dieses Format.

Zur korrekten Erkennung dieses Formats muss eine Datei die Erweiterung .ogg tragen, also zum obigen Beispiel passend werbespot.ogg heißen. Die Kleinschreibung der Erweiterung ist dabei entscheidend.

WebM

Das WebM-Format ist ein extra für die Wiedergabe von Videos im Web entwickeltes Format, welches derzeit von Google's Chrome ab Version 6.0 und von Opera ab Version 10.6 unterstützt wird. Auch Mozilla Firefox kündigt die Unterstützung in der noch nicht veröffentlichen Version 4.0 an.

Zur korrekten Erkennung dieses Formats muss eine Datei die Erweiterung .webm tragen, also zum obigen Beispiel passend werbespot.webm heißen. Die Kleinschreibung der Erweiterung ist dabei entscheidend.

Schritt 2: Video hochladen

  1. Öffnen Sie im Contao-Backend die Dateiverwaltung und wählen Sie einen möglichst leeren Unterordner für Ihre Sammlung von Videoformaten aus oder legen Sie einen neuen Unterordner an. Dieser könnte hier beispielhaft direkt im Hauptverzeichnis der Dateiverwaltung angelegt werden und den Namen videos haben.
  2. Laden Sie die FLV-Videodatei in das Verzeichnis hoch. Verfahren Sie genauso mit den übrigen Videoformatdateien des gleichen Videos.
    Achten Sie dabei vor dem Hochladen auf die richtige Erweiterung am Ende der Videodatei!
  3. Laden Sie optional ein Standbild Ihres Videos im JPEG-Format ebenfalls in den Unterordner videos hoch.
    Achten Sie auch hier vor dem Hochladen auf die korrekte Erweiterung .jpg!
  4. Korrigieren Sie die Namen der hochgeladenen Videodateien und der Bilddatei, so dass diese sich nur noch in der Erweiterung unterscheiden.
  5. Notieren Sie sich den relativen Pfadnamen dieser nun erzeugten Videokollektion. Angenommen, Ihre Dateien heißen nun werbespot.flv, werbespot.mp4, werbespot.ogg, werbespot.webm und werbespot.jpg, dann besteht der relative Pfadname aus dem Pfadnamen innerhalb der Dateiverwaltung von Contao und dem Namen einer dieser Dateien ohne Erweiterung. In diesem Beispiel wäre dies 
    videos/werbespot

Schritt 3: Wiedergabe in Webseite einbetten

Öffnen Sie nach dem Hochladen der Videodateien den Artikel einer Seite, in welchen Sie das Video einbetten möchten. Legen Sie darin ein Inhaltselement vom Typ Text an oder öffnen Sie ein bereits vorhandenes Element dieses Typs. Alternativ kann auch jeder andere Typ gewählt werden, der die Eingabe von Insert-Tags in sinnvoller Weise erlaubt.

Notieren Sie nun an der gewünschten Stelle den folgenden Insert-Tag:

{{interlake::videos/werbespot}}

Das Beispiel hier passt zu den beispielhaften Annahmen weiter oben. Man erkennt den relativen Pfadnamen der Videokollektion welche eingebunden werden soll. Wenn Sie das Inhaltselement nun speichern und in die Frontend-Vorschau wechseln, erscheint anstelle des Insert-Tags der Videoplayer und darin das Video im passenden Format. Die Größe ist dabei per Voreinstellung auf ein Viertel der Fläche des PAL-SD Standards gesetzt.

Optionen für den Insert-Tag

Diese Größenvorgabe können Sie wie auch weitere Einstellungen durch Ergänzung von Optionen im Insert-Tag anpassen. Notieren Sie dazu neben dem relativen Pfadnamen der Videokollektion durch Kommata voneinander getrennt Optionen. Achten Sie dabei darauf, dass diese nach den zwei Doppelpunkten oder vor den zwei schließenden Klammern ergänzt werden müssen.

Manche der Optionen erwarten eine Parameterzuweisung, welche getrennt durch ein Gleichheitszeichen unmittelbar nach dem Optionennamen notiert wird. Andere Optionen sind Schalter, welche nur aktiviert oder deaktiviert werden können. Deshalb werden Sie zur Aktivierung direkt ohne weitere Ergänzungen notiert. Durch Voranstellung des Präfix no wird die entsprechende Option deaktiviert.

Folgende Optionen stehen zur Verfügung:

Option Gültigkeit Beschreibung Beispiel/Standard
width Interlake & HTML5 Angabe der Breite des Videos in Pixel. width=384
height Interlake & HTML5 Angabe der Höhe des Videos in Pixel height=288
controls HTML5 Aktiviert die Anzeige der Steuerelemente des Browsers. nocontrols kehrt diese Einstellung um, was vor allem bei Nutzung eines auf HTML basierenden Steuerfeldes erforderlich ist controls
stop Interlake Blendet den Stop-Button ein bzw. aus (nostop) stop
scrub
 Interlake Blendet den Fortschrittsbalken ein, der die Dauer des Videos optisch visualisiert und die schnelle Navigation zu bestimmen Zeitpunkten des Videos erlaubt scrub
volume
 Interlake Aktiviert die Anzeige der Lautstärke-Steuerung volume
shading
 Interlake Wählt die Nutzung von Farbverläufen bei der Darstellung der Steuerelemente aus shading
overlay Interlake Schaltet die Positionierung der Steuerleiste des Players auf Anzeige im Videobereich um.

Ist diese Option deaktiviert, werden alle Steuerelemente unterhalb des Videos dauerhaft angezeigt. Eventuell muss dann die Höhenangabe entsprechend angepasst werden.

 overlay
time Interlake Zeigt die Restlaufzeit des Videos an. time
autoplay Interlake Aktiviert die sofortige Wiedergabe des Videos beim Laden der Seite. noautoplay
buffer Interlake Definiert die Vorlaufzeit des Videodownloads.

Eine Erhöhung dieses Werts kann Übertragungsproblemen bei geringerer Bandbreite vorbeugen.

 buffer=5
name Interlake Diese Option wählt den Namen, welcher für den eingebetteten Flash-Videoplayer gewählt wird. Dadurch wird die Interaktion mit dem Player in JavaScript unterstützt. name=interlake
bgcolor Interlake Wählt die Farbe des Hintergrunds der Flash-Einbettung aus. Da intern ein transparenter Hintergrund fest gewählt wird, hat diese Option derzeit keine sichtbare Wirkung.

Die Angabe der Farbe erfolgt, wie für HTML und CSS üblich, als 6-stellige Hexadezimalzahl, welche die Werte je RGB-Farbkanal setzt.

 bgcolor=000000
playercolor Interlake Mit dieser Option wird die Hintergrundfarbe und die Farbe des sichtbaren Rahmens um das Video bestimmt. playercolor=808080
buttoncolor Interlake Dieser Farbwähler bestimmt die Farbe der Buttons. buttoncolor=ffffff
iconcolor Interlake
 Diese Option wählt die Farbe zur Darstellung von Icons und Text.
 iconcolor=ffff00

Folgendes Beispiel ist nun geeignet, mit diesen Optionen die bisherige Einbettung in der Größe auf 400x300 Pixel umzustellen und die Steuerelemente im Interlake Videoplayer etwas zu reduzieren:

{{interlake::videos/werbespot,notime,level=60,autoplay,nostop,width=400,height=300}}

Beispiel: Videoanleitung zur Installation der Erweiterung