Montag, 5. Dezember 2016

Videos reloaded - Neue Videoload-Version 2

Dieser Beitrag dokumentiert die nunmehr zweite, vollständig überarbeitete Version des Videoload-Werk­zeugs, mit dem sich in Twoday auf einfache Weise Video-, Audio- und andere Quell­formate einbinden lassen, die ansonsten mangels iframe-Möglich­keit unter Twoday draußen bleiben müssten. Er ersetzt voll­ständig die alte Doku­men­tation in diesem Beitrag vom Februar 2015.
Wichtige Infos für bisherige Videoload-Nutzer

1 Um die neue Videoload-Version nutzen zu können, müssen Sie den Aufruf des Scripts im Twoday-Skin Site.page einmalig ändern. Wie das geht, wird weiter unten im Abschnitt Upgrade auf Videoload Version #2 beschrieben.

2 Die alte Tool-Version bleibt zwar weiterhin abrufbar, wird jedoch nicht mehr gepflegt. Die neue Version ist um Größenordnungen schneller, beinhaltet außerdem neue Anbieter wie z.B. Bandcamp, dctp.tv, Slideshare sowie Speakerdeck und ist bereinigt um mittlerweile nicht mehr aktive Anbieter (z.B. myvideo.de). Ich rate wärmstens zum vertrauensvollen Umstieg auf Videoload #2! ;)

videoload/videoinst.jpg

In der IT ist das so eine Sache mit der Pflege und Wartung von Alt-Software. So schwankt man beim Wiederstudium von älteren eigenen JavaScript-Codeschnipseln zwischen sehr ambivalenten Gefühlen, die sich irgendwo zwischen "Diese in einem magischen Moment entstandene brillante Codestrecke verstehen nur noch Gott, Mark Zuckerberg oder mein früheres Ich!" und "War ich das? Wie schlecht ist das denn bitte programmiert?" bewegen.

Jeder hat eben das Recht, täglich etwas schlauer zu werden. Und so ist auch Videoload erwachsener geworden, sehr viel schlanker und auch deutlich schneller. Für interessierte Techies und Nerds gibt's hier weitere Informationen.

Warum Videoload und wozu dient es?

Seit die meisten Videoplattformen und Content-Anbieter den alten <embed>-Befehl zugunsten des mo­derneren <iframe>-Formats aufgegeben haben, ist eine Einbindung solcher Quellen mit Standardmitteln bei Twoday nicht mehr möglich. In Twoday-Beiträgen wird jeder mutige Versuch einer direkten iframe-Nutzung beim Speichern des Beitragstextes sofort wieder herausgefiltert.

Videoload führt einen Ausgleich zwischen Twodays berechtigtem Sicherheitsinteresse und den Content-Wünschen der Nutzer herbei, indem es valide und überprüfbare iframe-Aufrufe für einen definierten Kreis von sicheren Anbietern erzeugt. Derzeit (Stand: Dezember 2016) generiert Videoload Verbindungen zu 16 verschiedenen Plattformen und bindet den gewünschten Inhalt (z.B. ein YouTube-Video) auf einfache Weise in den jeweiligen Blogbeitrag ein. Folgende Provider stehen zur Verfügung:

Klick auf Icon öffnet die jeweilige Anbieterseite

Videoload bietet nicht nur Zugriff auf die wichtigsten Videoanbieter, sondern stellt auch Audioinhalte (z.B. via Bandcamp, Soundcloud), Präsentationen (z.B. via Slideshare, Speakerdeck), GIFs (via Giphy) oder Code-Snippets (via Jsfiddle) bereit.

Erstmalige Installation

Zur Installation Ihrer neuen Videoload-Möglichkeiten ist eine einmalige Anpassung des Twoday-Skins Site.page erforderlich:

  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 AdminLayout 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 untere Ende der Anzeige.
  4. Kopieren Sie dort vor das abschließende </body>-Element folgende Zeilen hinein:
    <script type="text/javascript" src="<% staticURL %>cdn/files/videoload2-min-js.js"></script>
    <script type="text/javascript">video2day.run();</script>

    Wie kopiere ich das?

    Ihr Skin Site.page sollte nun in etwa so aussehen:

    videoload/install.jpg

    <% 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 Twoday-Beiträgen Video- und Audioelemente der aufgeführten Plattformanbieter einbinden. Wie das funktioniert, finden Sie im übernächsten Abschnitt Videoload verwenden.

Upgrade auf Videoload Version #2

Falls Sie bereits die Erstversion des Videoload-Scripts nutzen, sollten Sie auf die neue Version 2 umstellen. Hierzu ist der Aufruf von Videoload im Skin Site.page anzupassen bzw. zu ergänzen.

Bisher steht dort am Ende des Skins, vor dem abschließenden </body>-Befehl, folgender Eintrag:

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

Bitte ändern/erweitern Sie den Aufruf wie folgt:

<script type="text/javascript" src="<% staticURL %>cdn/files/videoload2-min-js.js"></script>
<script type="text/javascript">video2day.run();</script>

Wie kopiere ich das?

d.h. also in Zeile 1 den Scriptnamen videoload in videoload2 ändern und die zweite Zeile darunter ergänzen.

Selbstverständlich ist die Version #2 vollständig abwärtskompatibel zur Erstversion, d.h. alle bisherigen Videoeinbettungen funktionieren sofort und ohne Änderung mit der neuen Version problemlos weiter.

Videoload verwenden

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 Videoload-Script, dass es innerhalb dieses div-Elements eine Einbettung vornehmen soll. Die darauf folgende Anbieterkennung bezeichnet die Plattform, von der das anzuzeigende Objekt stammt. Im Beispiel oben soll ein Youtube-Video generiert werden. Im Attribut id legen Sie fest, welches Youtube-Video angezeigt wird (jedes Anbieterelement hat eine eindeutige Identifikation).

Die betreffende ID findet sich meist recht einfach im Einbettungs­code des Videoanbieters (dem <iframe>-Befehl) und besteht i.d.R. aus einer kurzen Kombination von Zahlen und Buchstaben. In der Tabelle "Individuelle Parameter je Anbieter" weiter unten finden Sie eine genaue Information, wie Sie die benötigte ID bei jedem Anbieter manuell ermitteln. Außerdem stelle ich im Folgekapitel ein Tool vor, das die notwendigen Daten voll­automatisch aus dem kopierten iframe-Einbettungs­code ermittelt und für Sie den korrekten Twoday-DIV-Befehl gebrauchsfertig zusammenstellt. Damit entfällt die manchmal etwas umständliche Suche nach der richtigen ID.

Die passende Kennung für einen der 16 möglichen Anbieter finden Sie unten als Beschriftung in den blauen Tabulatoren. Um also ein Vimeo-Video einzufügen, heißt der entsprechende DIV-Befehl

<div class="html5video vimeo" id="{eine-vimeo-id}"></div>

Für die Anzeige eines GIFs von giphy.com wäre das DIV-Element folgendermaßen zu schreiben:

<div class="html5video giphy" id="{eine-giphy-id}"></div>

Minimal benötigt eine Einbettung also stets drei Informationen: den feststehenden Bezeichner html5video, die Textkennung des gewünschten Anbieters und die eindeutige ID des anzuzeigenden Elements.

Ergänzende Einstellparameter

Es gibt weitere Parameter, mit denen Sie die Breite und das Seitenverhältnis des einzubettenden Elements beeinflussen können. Diese beiden Parameter sind für alle Anbieter zulässig.

Parameter bestehen mindestens aus dem Parameternamen und — soweit erforderlich — aus einem Parameterwert, verbunden durch einen Bindestrich. Eine Breitenangabe kann z.B. width-500 sein; ein Parameter zum Seitenverhältnis z.B. ratio-1.6834. Kommazahlen müssen dabei stets mit Punkt geschrieben werden.
width — Breite festlegen/begrenzen

Im oben gezeigten Beispiel nimmt das Youtube-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 mithilfe des width-Parameters machen. Für eine Breite von z.B. 350 Pixeln lautet der Befehl:

<div class="html5video youtube width-350" id="DyfM7oLIlp0"></div> …

ratio — Seitenverhältnis einstellen/korrigieren

Die meisten Videos haben ein Seitenverhältnis von 16:9, d.h. ein Verhältnis von Breite zu Höhe von 1,77778. Manche Videos haben noch ein 4:3 Verhältnis (1,33333) 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 Vine-Video mit einem Seitenverhältnis von 1,0 und einer Breite von 400 Pixeln lautet dann:

<div class="html5video vine ratio-1 width-400" id="OTtQVYI2JY2"></div> …

Dies bewirkt in diesem Fall, dass das Video die gleiche Höhe wie Breite erhält, d.h. 400 Pixel breit und hoch ist.

Neben diesen beiden grundsätzlich verwendbaren Parametern gibt es je Plattform verschiedene individuelle Parameter, mit denen man bestimmte Funktionen oder Darstellungsweisen des Anbieters aktiviert. Diese sind je Plattform in den nachstehenden Tabs beschrieben.

Individuelle Parameter je Anbieter

Klick auf ein Tab öffnet die Dokumentation für diesen Anbieter

Einen Moment bitte, die Dokumentation wird geladen...

Videoload-Tool nutzen

Twoday-Videoload-Code automatisch generieren

Es ist evtl. etwas mühsam, die oben beschriebenen Parameter für jeden der 16 Anbieter im Kopf zu behalten oder erst wieder nachzuschlagen, wenn man sie 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 jeweiligen Anbieter bereitgestellten iframe-Einbettungscode in das Formularfeld iframe-Code des Tools kopieren 1. Dieses erkennt die jeweilige Quellplattform, extrahiert die korrekte ID des Elements sowie alle anderen erkannten Einstellparameter. Daraus generiert es den kopierfertigen HTML-Befehl für Ihren Twoday-Beitrag und zeigt diesen im Feld HTML-Code an 2.

videoload/videoload1.jpg

Beispiel: Bandcamp-Audio

Nehmen wir ein konkretes Beispiel: Sie möchten das Album "Love & War & The Sea In Between" (Josh Garrels) von der Plattform Bandcamp in einen neuen Twoday-Beitrag einbetten. Sie haben den entsprechenden iframe-Befehl auf seiner Albumseite ermittelt und in die Zwischenablage kopiert. Nach Aufruf des Videotools fügen Sie den kopierten iframe-Befehl in das Eingabefeld iframe-Code ein 1.

Das Videotool analysiert den übergebenen Befehl und stellt alle erkannten Parameter in einem speziellen DIV-Kommando2 zusammen, aus dem das Videoload-Script später wieder den eigentlichen Einbettungsbefehl erstellt.

videoload/videoload2.jpg

Unter dem HTML-Befehl zeigt das Tool das von Ihnen gewünschte Element an, und zwar so wie es später auch beim Aufruf des Beitrags zu sehen sein wird 3. Sie haben nun die Möglichkeit, die Anzeige weiter zu konfi­gurieren, z.B. Größe und Erscheinungsbild zu ändern oder weitere Parametereinstellungen vorzunehmen, die für diesen Anbieter zulässig sind. Klicken Sie hierfür auf die grüne Schaltfläche "Parameter ändern / manuell setzen...".

videoload/videoload3.jpg

Statt des iframe-Code-Feldes wird nun eine Detailansicht mit allen verfügbaren Einstellparametern angezeigt. Die einzelnen Felder sind bereits mit den Werten vorbelegt, die aus dem iframe-Befehl herausgelesen werden konnten. Ändern Sie eine Einstellung, wird der zugehörige HTML-Befehl sofort neu generiert und als Kopiervorlage angezeigt.

videoload/videoload4.jpg

Wenn Sie z.B. die Bandcamp-Linkfarbe ändern und zusätzlich eine Tracklist mit 6 Songs anzeigen wollen, stellen Sie dies in den zugehörigen Feldern ein. Unmittelbar passt das Tool auch den HTML-Befehl an die veränderten Einstellwerte an.

videoload/videoload5.jpg

Das tatsächliche Aussehen des Elements können Sie unterhalb des Codes kontrollieren. Entspricht alles Ihren Vorstellungen, markieren Sie den fertigen HTML-Befehl und kopieren ihn in die Zwischenablage.

videoload/videoload6.jpg

Navigieren Sie nun zu Ihrem Beitrag und fügen Sie den kopierten Code an der gewünschten Stelle in den Text ein:

videoload/videoload7.jpg

Dieser Ablauf funktioniert für jeden der 16 Anbieter identisch. Wollen Sie also ein YouTube-Video in Ihren Beitrag einfügen, kopieren Sie den entsprechenden iframe-Code des Videos und das Tool zeigt Ihnen das passende DIV-Kommando für die Einbettung im Twoday-Beitrag.

Das Videotool finden Sie dauerhaft unter folgender Linkadresse:

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

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

Videotool aufrufen...

Videoload parametrisieren (für erfahrene Nutzer)

Script-Verhalten über Parameter steuern

Im Aufruf des Videoload-Scripts video2day.run(); (siehe Abschnitt "Installation") müssen keine Parameter innerhalb der Klammer mitgegeben werden, wenn Sie die Standardeinstellungen nutzen wollen. Gleichwohl kennt das Script eine Reihe von Einstellparametern, mit denen Sie sein Verhalten beeinflussen können. Diese werden nachstehend erläutert. Parameter übergeben Sie stets in geschweiften Klammern, wobei die einzelnen Parameter durch Komma getrennt sind:

video2day.run( {parameter1: wert, parameter2: wert, ... , parameterx: wert} );

Um z.B. die Breite für alle Videoload-Elemente auf maximal 400 Pixel zu begrenzen und außerdem den Debug-Modus einzuschalten, muss der Videoload-Aufruf inkl. der entsprechenden Parameter folgendermaßen aussehen:

video2day.run( {maxWidth: 400, debug: true} );

Die Reihenfolge der Parameter untereinander ist beliebig. Folgende Möglichkeiten stehen zur Verfügung:

Script-ParameterStandardBedeutung/Wirkung
addFlexVideoClassfalsetrue aktiviert den "responsive"-Modus, in welchem alle Anbieterelemente responsiv, d.h. in Abhängigkeit einer sich verändernden Containergröße dargestellt werden. Dieser Modus wirkt sich nur innerhalb von responsiven Blog-Templates aus (die Standard-Templates von Twoday sind leider NICHT responsiv). Dieses Blog hier basiert auf einem eigenerstellten, responsiven Foundation5-Template. Bei der Ansicht von Blogseiten mit Videoload-Elementen werden diese im Portrait- oder Landscape-Modus eines Tablets bzw. Mobile Phones anders dargestellt. Auch bei der Verkleinerung des Browserfensters am Desktop wird die Größe der Videoelemente dynamisch im richtigen Aspektverhältnis angepasst.
contentClass'storyContent'Dies ist die div-Klasse des Containers, der einen gesamten Blogbeitrag umfasst und seine maximale Breite festlegt. Bei Twoday heißt diese Klasse storyContent (Standard).
debugfalsetrue aktiviert den Debug-Modus, in welchem zusätzliche Nachrichten auf die Browser-Console ausgegeben werden. Im Fehlerfall oder bei Unstimmigkeiten können hiermit wichtige Zwischenergebnisse des Scripts protokolliert und kontrolliert werden.
maxWidth-1Mit maxWidth können Sie für alle auf Ihrem Blog angezeigten Videoload-Elemente eine maximale Breite festlegen. Wenn z.B. kein Element breiter als 440 Pixel breit sein soll, geben Sie beim Scriptstart den Parameter { maxWidth: 440 } mit. Dies erspart Ihnen in dem Fall eine Größenlimitierung in jedem einzelnen Element mitzugeben (z.B. per width-440 als Videoparameter).
position'bottom'Mit Hilfe des position-Parameters können Sie festlegen, wo der iframe des Anbieters eingefügt werden soll. Gültige Werte sind bottom, also am Ende des DIVs (das ist auch der Standard) oder top für den Anfang des DIVs. Text, der innerhalb des DIVs steht, wird also jeweils vor dem iframe (bei Einstellung bottom) oder nach dem iframe (bei Einstellung top) ausgegeben.
posterSize'cover'Für MP4-Videos (Videoload-Typ other) kann ein Posterbild angezeigt werden, solange der Nutzer das Video noch nicht gestartet hat. Über den Script-Parameter posterSize lässt sich einstellen, wie das Bild in der festgelegten Größe des Videorahmens angezeigt wird: cover streckt das gesamte Bild, so dass es den Videorahmen vollständig ausfüllt. contain skaliert das Bild auf die längste Seite (es können Ränder entstehen). Die Standardeinstellung ist { posterSize: 'cover' }.
selector'.html5video'Mit Hilfe des Selectors findet Videoload alle Stellen, in denen eine Einbettung eines Anbieterelements vorgenommen werden soll (z.B. ein YouTube-Video oder ein Bandcamp-Audio). Standardmäßig ist dafür die CSS-Klasse .html5video eingestellt.
useVideoJStrueFür die Anzeige beliebiger MP4-Videos wird der bewährte Videoplayer VideoJS genutzt. Dieser wird bei Vorliegen des Videoload-Typs other nachgeladen und mit dem Abspielen des Videos beauftragt. Allerdings beinhalten die meisten modernen Browser bereits eigene Routinen zum Abspielen von MP4-Videos (z.B. Chrome, Firefox), so dass man — wenn man das Problem für Nutzer älterer Browser ignoriert — eine separate Player-Lösung nicht bräuchte. Wer sich also nur auf den Browser als Abspielsoftware verlassen will, kann über die Einstellung { useVideoJS: false } das Nachladen eines universellen Players unterbinden und so noch ein paar Millisekunden Ladezeit einsparen.
Außergewöhnliches
Dinge, die gut sind
Entgleisungen
Gemalte Lebenserfahrung
Musik
Nachtgedanken
Neon's Must-Have-Tools
Neon's Top10 List
Neon-Award
Schöner Bloggen
Today I Learned
Wort des Tages
Profil
Abmelden
Weblog abonnieren
Meine bearbeiteten Skins
Hauptseite (Site.page)
Toolbar (Site.foundationToolbar)
Foundation 5 docs
Foundation 5 github
Font Awesome Cheatsheet