Nur ein Script — und alles wird gut

Um ab sofort in Ihrem Blog Videos aller großen Plattformen oder auch eigene MP4-Videodateien anzeigen zu können, benötigen Sie nur ein Script, das Sie einmalig im Skin Site.page einbinden:

1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihr Blog auf.
2. Wählen Sie in der Menüzeile oben Admin → Layout und dann Skins (HTML)
3. Klicken Sie auf die Überschrift Hauptseite (Site.page), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das Ende der Anzeige.
4. Kopieren Sie dort vor das abschließende </body>-Element folgende Zeile hinein:

   <script type="text/javascript" src="<% staticURL %>cdn/files/videoload-min-js.js"></script>

   Kopieren einfach gemacht: Fahren Sie mit der Maus über das schwarze Codefeld oben und klicken dort auf pop-up. Markieren Sie den Text in dem erscheinenden Pop-Up-Fenster und kopieren Sie ihn in die Zwischen­ablage. Falls bei Ihnen der Link copy angezeigt wird (Rechner mit Adobe Flash-Installation), können Sie darauf klicken, um den Text ohne Pop-Up-Fenster sofort in die Zwischen­ablage zu kopieren. Gehen Sie nun in Ihren Skin Site.page und kopieren dort aus der Zwischenablage an die richtige Stelle vor </body>.Ihr Skin Site.page müsste nun in etwa so aussehen:

   <% staticURL %> ist ein Twoday-Makro und steht für „http://static.twoday.net/“, dem abgesicherten Blogspeicher für Twoday-Bilder oder -Dateien.

5. Klicken Sie auf „Speichern und Schließen“ um Ihre Änderungen zu sichern. Sie können nun zu jeder Zeit in Ihren Beiträgen Videos einbinden und anzeigen.

Das Script ist so geschrieben, dass es die Videofunktion nur dann lädt, wenn auf der aktuell anzuzeigenden Seite tatsächlich ein Videobefehl gefunden wird. Es gibt also keine Verzögerung bei den Ladezeiten für Seiten ohne Videos.

Videos im Blogbeitrag anzeigen

Um ein Video in einem Beitrag anzuzeigen, verwenden Sie einen einfachen DIV-Befehl, der z.B. für ein YouTube-Video so aussieht:

<div class=“html5video youtube“ id=“DyfM7oLIlp0″></div>

An der feststehenden Zeichenkette html5video erkennt das eingebundene Script, dass hier ein Video angezeigt werden soll. Die darauf folgende Kennung beschreibt die Plattform, von der das Video stammt. Derzeit kann das Script Videos von folgenden Anbietern generieren:

Im DIV-Parameter id wird die ID des jeweiligen Videos vermerkt. Diese Video-ID findet sich meist recht einfach im iframe-Befehl des Videos (Einbettungs­code des Videoanbieters) und besteht i.d.R. aus einer kurzen Kombination von Zahlen und Buchstaben. Weiter unten stelle ich ein Tool vor, das die notwendigen Daten voll­automatisch aus dem kopierten iframe-Einbettungs­code ermittelt und für Sie den korrekten Twoday-HTML-Befehl gebrauchsfertig zusammenstellt.

Ergänzende Videoparameter

Breite

Im oben gezeigten DIV-Befehl nimmt das Video die volle Breite des umgebenden Containers ein, d.h. es füllt die Twoday-Beitragsspalte horizontal vollkommen aus. Falls Sie das Video kleiner darstellen wollen, können Sie zusätzlich eine Breitenangabe machen. Der Befehl für das obige Video in einer Breite von 350 Pixeln lautet dann:

<div class=“html5video youtube width-350″ id=“DyfM7oLIlp0″></div>

Seitenverhältnis

Die meisten Videos haben ein Seitenverhältnis von 16:9, d.h. ein Verhältnis von Breite zu Höhe von 1,7778. Manche Videos haben noch ein 4:3 Verhältnis (1,3333) und wieder andere eine sehr individuelle Streckung (z.B. bei Breitbildformaten). Das Script verwendet im Standard die 16:9-Anzeige. Wenn das Video verzerrt dargestellt wird, können Sie ein eigenes Seitenverhältnis einstellen. Der Befehl für ein Putpat-Video mit einem Seitenverhältnis von 2,4 und einer Breite von 400 Pixeln lautet dann:

<div class=“html5video putpat ratio-2.4 width-400″ id=“3qs5vhn“></div>

Bitte geben Sie Kommawerte immer mit Punkt an, also z.B. 1,799 als ratio-1.799

Eigene MP4-Videodateien

Sie können auch eigene MP4-Videodateien in einem Videoplayer anzeigen lassen. Diese müssen eine öffentlich erreichbare URL besitzen, also z.B. bei einem Cloudspeicheranbieter wie Dropbox, GoogleDrive oder auf eigenem Webspace liegen. Für die Anzeige wird der bekannte Open Source HTML5 Videoplayer VideoJS verwendet. Die Adresse/URL des Videos wird im Parameter id übergeben. Der Befehl für die Einbindung eines eigenen MP4-Videos hat dann folgendes Format:

<div class=“html5video other ratio-2.4″ id=“https://googledrive.com/host/0B87rILW4RVIJUFpWT2dLeG9RUzg/oceans-clip.mp4″></div>

Posterbild für eigene MP4-Videodateien

Über einen weiteren Parameter weisen Sie die Videofunktion an, ein Posterbild im Videobereich anzuzeigen, solange das Video noch nicht vom Anwender gestartet wurde. Das Posterbild ist ein „Standbild“ in einem beliebigen Bildformat (z.B. jpg, png, gif, bmp) und muss sich an gleichem Ort wie das MP4-Video befinden.

Wenn ein MP4-Video im Pfad http://www.meinewebadresse.de/videos/meinvideo.mp4 zu finden ist, muss ein zugehöriges jpg-Standbild die Adresse http://www.meinewebadresse.de/videos/meinvideo.jpg besitzen. Für die Anzeige eines Standbilds ergänzen Sie einfach poster als zusätzlichen Übergabewert. Ist das Standbild nicht vom Typ jpg, so definieren Sie je nach Dateityp ergänzend ein image-png, image-gif oder image-bmp.

Beispiel: Für ein MP4-Video in 500 Pixel Breite, einem Seitenverhältnis von 2,4 und einem gif-Standbild lautete der DIV-Befehl dann so:

<div class=“html5video other width-500 ratio-2.4 poster image-gif“ id=“https://googledrive.com/host/0B87rILW4RVIJUFpWT2dLeG9RUzg/oceans-clip.mp4″></div>

Der poster-Parameter funktioniert nur bei MP4-URL-Videos (Typ other)! Bei Videos von Plattformen wie z.B. YouTube hat er keine Wirkung.

Twoday-Videocode automatisch generieren

Es ist evtl. etwas mühsam, die oben beschriebenen Parameter für einen Videoaufruf im Kopf zu behalten oder erst wieder nachzuschlagen, wenn man sie für ein Video benötigt. Aus diesem Grund habe ich zusätzlich ein kleines Online-Tool erstellt, das den Twoday-Code automatisch für Sie zusammenstellt.

Sie müssen nur noch den vom Videoanbieter bereitgestellten iframe-Einbettungscode in das Formularfeld iframe-Code 1 des Tools kopieren. Dieses erkennt den Videoanbieter, extrahiert die korrekte Video-ID, errechnet aus Breite und Höhe das empfohlene Seitenverhältnis und stellt diese Ergebniswerte im Bereich Optionen Videoanzeige 2 ein.

Dort können Sie nun noch nach Wunsch eine kleinere Breite einstellen oder ein anderes Seitenverhältnis wählen. Bei jeder Änderung wird der entsprechende Twoday-HTML-Code neu generiert 3 und als Kopiervorlage angezeigt.

Direkt unter dem Feld HTML-Code wird das gewünschte Video auf Basis Ihrer gewählten Einstellungen eingeblendet. Entspricht alles Ihren Vorstellungen, kopieren Sie den generierten HTML-Code einfach in Ihren Beitragstext.

Das Videotool finden Sie dauerhaft unter folgender Linkadresse:

http://neonwilderness.twoday.net/stories/videotool

oder per Schaltfläche hier im Beitrag sowie rechts unten in der Sidebar:

Videotool aufrufen…