In a neon wilderness he was restless

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 "https://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.

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>

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://dl.dropboxusercontent.com/u/16775880/movies/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://dl.dropboxusercontent.com/u/16775880/movies/oceans-clip.mp4"></div>

Anzeige einer wählbaren Zeitspanne (von/bis) von YouTube-Videos

Falls Sie nur einen selektiven Ausschnitt eines YouTube-Videos zeigen möchten, d.h. ab einer gewissen Stelle des Videos starten und/oder an einer bestimmten Stelle des Videos enden wollen, so verwenden Sie dafür den start- bzw. den endat-Parameter. Beide Angaben erfordern einen zusätzlichen Zeitwert in Sekunden. Dazu ist die Beginn- bzw. Endestelle in Sekunden umzurechnen, z.B. 21:32 entspricht 1292 (21*60+32).

Beispiel: Um einen Song eines längeren Festival-Videos von Stelle 21:32 bis Stelle 31:35 anzuzeigen, ist folgender Befehl zu verwenden:

<div class="html5video youtube start-1292 endat-1895" id="qNNecZkPY2Y"></div>

Um nur ab einer bestimmten Stelle zu starten, reicht die alleinige Angabe des start-Parameters.

Anzeige von jsfiddle-Codebeispielen

jsfiddle.net ist eine Plattform, mit der das Zusammenspiel von HTML-, CSS- und JavaScript-Elementen dargestellt, getestet und visualisiert werden kann. Fertige Lösungen können zu Lernzwecken auf anderen Webseiten eingebunden werden. Das hat zwar wenig mit Videos zu tun, allerdings ist der Einbettungsbefehl fast identisch mit einem Video-iframe-Kommando. Zur Einbindung eines jsfiddle-iFrames wird — ähnlich der Videofunktion — nur eine ID benötigt:

<div class="html5video jsfiddle" id="{id-des-jsfiddles}"></div>

Die benötigte ID des jsfiddles entspricht der ID-Kennung hinter der Adressangabe 'https://jsfiddle.net/':

Zusätzlich können Sie den Umfang der Anzeige festlegen. Im Standard zeigt das eingebettete jsfiddle alle vier Komponenten (html, css, js und result) an. Mit Hilfe des scope-Parameters können Sie diesen Umfang eingrenzen (Elemente durch Komma, jedoch ohne Leerzeichen, trennen, z.B. scope-css,html):

<div class="html5video jsfiddle scope-html,css,js" id="tx2w4s19"></div>

Für das Aussehen des Einbettungsobjekts stehen die Layoutversionen hell ("light") und dunkel ("dark" = Standard) zur Verfügung — diese werden über den color-Parameter aktiviert, z.B. so:

<div class="html5video jsfiddle color-light scope-html,css,js" id="tx2w4s19"></div>

Einbindung von Soundcloud-Audiostücken

soundcloud.com ist eine Musikplattform, deren Audiosamples in Webseiten eingebettet und abgespielt werden können. Da die Einbindung sich sehr ähnlich zu der einer Videodatei darstellt, kann die Videoload-Lösung dies einfach mit erledigen: benötigt wird wie immer nur die ID des Audiostücks, die sich relativ einfach aus dem iframe-Code ermitteln und kopieren lässt:

Noch einfacher ist es, den gesamten iframe-Code des Audiostücks in das vorhandene Videotool zu kopieren — das Tool erkennt die Quelle und die ID automatisch und liefert Ihnen den fertigen Twoday-konformen HTML-Befehl als Kopiervorlage:

Ein Beispiel für die Einbindung des Audiosamples Be merciful der Gruppe Kula Shaker würde demnach mit folgendem Code erzeugt werden:

<div class="html5video soundcloud" id="20636707"></div>

Um die Soundcloud-Anzeige etwas schmaler zu gestalten, kann man den Zusatz stripe ergänzen. Der Befehl

<div class="html5video soundcloud stripe" id="20636707"></div> erzeugt

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...