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: März 2023) 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 Slides, 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 "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 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:

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

Videotool 2

Anleitung: Kopieren Sie den Einbettungscode der Quellplattform in das Feld iframe-Code, um den entsprechenden Videoload2-Befehl zu erhalten. Ergänzend können Sie die Breite anpassen oder auch alle Parameter ändern bzw. vollständig selbst einstellen.

Den resultierenden HTML-Code kopieren Sie anschließend in Ihren Beitragstext (Videoload2-Script muss installiert sein!).

iframe-Code
HTML-Code für Twoday

Anbieterdoku (siehe "Videoload2"-Artikel)

Bandcamp ist ein Anbieter von Audiostücken, der sehr umfangreiche Anpassungsmöglichkeiten für die Anzeige bietet. Die maximale Anzeigebreite eines Bandcamp-Elements beträgt 700 Pixel. Mit Videoload können Sie folgende Einstellungen über Parameter vornehmen:

layout — Layout festlegen

Bandcamp bietet drei mögliche Layouts an:

ParameterBedeutung/Wirkung
layout-standardAnzeige des Standard-Layouts. Variable Höhe (min. 120 Pixel).
layout-slimSchmales Layout. Höhe 42 Pixel.
layout-artworkonlyAusschließliche Anzeige der Artwork (Albumcover). Breite und Höhe sind gleich.
artwork — Anzeige/Größe der Artwork einstellen

Als Artwork bezeichnet Bandcamp das Coverdesign des Albums bzw. eine vom Künstler ausgewählte Grafik. Mögliche Werte
dieses Parameters sind:

ParameterBedeutung/Wirkung
artwork-noneDie Artwork wird nicht angezeigt. Wirkt in Verbindung mit layout-slim und layout-standard.
artwork-showDie Artwork wird angezeigt. Wirkt in Verbindung mit layout-slim.
artwork-bigDie Artwork wird groß angezeigt. Wirkt in Verbindung mit layout-standard.
artwork-smallDie Artwork wird klein angezeigt. Wirkt in Verbindung mit layout-standard.
Damit die Artwork angezeigt wird, muss das Element mindestens eine Breite von 400 Pixel haben.

Für die Einstellung layout-artworkonly wird der artwork-Parameter automatisch auf big eingestellt.

bgcol — Hintergrundfarbe festlegen

Mit diesem Parameter können Sie eine individuelle Hintergrundfarbe für das Bandcamp-Element festlegen. Fehlt der Parameter, wird die Standardhintergrundfarbe weiß (Hexcode: #ffffff) angenommen. Möchten Sie z.B. einen dunkleren Hintergrund anzeigen, wählen Sie mit bgcol-333333 ein dunkles Grau aus.

Derzeit erlaubt Bandcamp nur weiß (ffffff) oder dunkelgrau (333333) als Hintergrundfarbe. Andere Farbcodes werden ignoriert.

linkcol — Farbe für Links festlegen

Sie können auch die Farbe der Bandcamp-Links einstellen. Dies empfiehlt sich z.B., wenn Sie die Hintergrundfarbe ändern und die Links nur noch schlecht lesbar sind. Wählen Sie dann eine passende Farbe aus (bei dunklem Hintergrund z.B. weiß) und ergänzen diese im Parameter linkcol-ffffff. Fehlt der Parameter, wird standardmäßig die Linkfarbe '0687f5' verwendet.

Farbcodes werden als 6-stellige Hexadezimalzahl kodiert. Welche Farbe welchen Hexcode besitzt, können Sie z.B. auf dieser Webseite herausfinden.

tracklist — Anzeige der Tracklist aktivieren

In der Layoutansicht standard lässt sich für Bandcamp-Alben auch eine Tracklist, also eine fortlaufende Liste der einzelnen Songs, anzeigen. Der tracklist-Parameter funktioniert wie ein Aktivierungsschalter. Wird er angegeben, erscheint die Tracklist. Fehlt er, wird auch keine Tracklist generiert. Für eine Tracklist wird die Höhe des Anzeigeelements automatisch vergrößert. Bei aktivierter Tracklist werden standardmäßig 2 Tracks angezeigt. Möchten Sie mehr Tracks anzeigen, können Sie dem Parameter einen Wert mitgeben, also z.B. tracklist-6 für 6 Tracks.

In der Layoutansicht slim oder artworkonly kann keine Tracklist gezeigt werden.

Beispiele

Es soll ein Bandcamp-Album im Standardlayout, mit großem Albumcover, dunklem Hintergrund, weißen Links und einer Standard-Tracklist (2 Tracks) ausgegeben werden. Der zugehörige Videoload-Befehl hieße dann:

<div class="html5video bandcamp layout-standard artwork-big bgcol-333333 linkcol-ffffff tracklist" id="2172528119"></div> …

Zusätzlich soll die Tracklist 8 Songs anzeigen und die Breite soll 500 Pixel betragen:

<div class="html5video bandcamp layout-standard artwork-big bgcol-333333 linkcol-ffffff tracklist-8 width-500" id="2172528119"></div> …

Es soll ein schmales Bandcamp-Element mit Albumcover ohne Tracklist generiert werden, das exakt 400 Pixel breit ist:

<div class="html5video bandcamp layout-slim artwork-show width-400" id="2172528119"></div> …

Wie finde ich die ID eines Bandcamp-Elements?

Dailymotion ist ein Videoanbieter. Folgender zusätzlicher Parameter ist möglich:

start — Video an einer bestimmten Stelle starten

Um ein dailymotion-Video an einer gewünschten Stelle zu starten, z.B. bei 02:15 (Minuten:Sekunden), rechnen Sie die
Zeitangabe in Sekunden um (im Beispiel 02:15 = 2*60+15 = 135) und fügen das Ergebnis als Parameterwert an die Kennung
start. Das vollständige Kommando lautet dann folgendermaßen:

<div class="html5video dailymotion start-135" id="{eine-dailymotion-ID}"></div>

Wie finde ich die ID eines Dailymotion-Videos?

dctp.tv ist ein unabhängiger Filmbeitragsanbieter. Folgender zusätzlicher Parameter ist möglich:

start — Video an einer bestimmten Stelle starten

Um ein dctptv-Video an einer gewünschten Stelle zu starten, z.B. bei 02:15 (Minuten:Sekunden), rechnen Sie die
Zeitangabe in Sekunden um (im Beispiel 02:15 = 2*60+15 = 135) und fügen das Ergebnis als Parameterwert an die Kennung
start. Das vollständige Kommando lautet dann folgendermaßen:

<div class="html5video dctptv start-135" id="{eine-dctptv-ID}"></div>

Wie finde ich die ID eines DCTPtv-Filmbeitrags?

FILMSTARTS.de ist ein führendes deutsches Online-Magazine rund um das Medium Film. Bei der Einbindung von Film-Trailern gibt es außer der Film-ID keine besonderen Parameter.

Beispiel

Es soll ein Filmstarts-Trailer mit der ID '19235661' in einem Blogbeitrag eingebunden werden:

<div class="html5video filmstarts" id="19235661"></div> …

Wie finde ich die ID eines filmstarts-Videos?

Giphy ist ein Anbieter von GIFs und Animationen. Eine Besonderheit bei Giphy ist, dass Videoload ein Objekt sowohl als <iframe> als auch als einfaches <img> einbinden kann. Zur Veranschaulichung sehen Sie nachstehend ein Beispiel mit beiden Einbindungstypen:

als <iframe>

als <img>

Die Einbindung als Bild (img) hat leichte Geschwindigkeitsvorteile, bietet jedoch dafür keinerlei Links zur Giphy-Hauptseite.

asimage — Das Giphy-Objekt als einfaches Bild einbinden

Um ein Giphy-Element als einfaches Bild einzubinden, ergänzen Sie in der DIV-Klasse den Parameter asimage.

<div class="html5video giphy asimage" id="GBdMUGeTSseM8"></div> …

alt — Das alt-Attribut bei einem Giphy-Bild setzen

Falls das Giphy-Element als Bild in Ihren Blogbeitrag eingefügt werden soll, können Sie zusätzlich den Inhalt des ALT-Attributs des generierten Bildes festlegen (hilfreich für Google Ranking und SEO). Nutzen Sie dafür den alt-Parameter und geben Sie im Parameterwert den gewünschten Text an. Da der Parameterwert keine Leerzeichen enthalten darf, können Sie Leerstellen als '_' (Unterstrich) schreiben:

<div class="html5video giphy asimage alt-Woman_on_red_roses" id="GBdMUGeTSseM8"></div> …

Fehlt der alt-Parameter, füllt Videoload diesen standardmäßig mit 'Giphy-' und der Bild-ID.

Wie finde ich die ID eines Giphy-Elements?

Itemfix ist ein Videoanbieter und die Nachfolgerplattform von Liveleak. Bei der Einbindung von Itemfix-Videos gibt es außer der Video-ID keine besonderen Parameter.

Beispiel

Es soll ein Itemfix-Video mit der ID 'oid6bs' in einem Blogbeitrag eingebunden werden:

<div class="html5video itemfix" id="oid6bs"></div> …

Wie finde ich die ID eines itemfix-Videos?

JsFiddle ist eine Online-Entwicklungsumgebung, in der man Code-Schnipsel, bestehend aus HTML, CSS und JavaScript testen bzw. Code-Beispiele als Anschauungsobjekt für andere hinterlegen kann. Folgende Parameter sind möglich:

color — Farbschema festlegen

JsFiddle bietet zwei Farbschemata an:

ParameterBedeutung/Wirkung
color-lightHelles Farbschema: dunkle Schrift auf hellem Hintergrund.
videoload/jsfiddle-light.jpg
color-darkDunkles Farbschema: helle Schrift auf dunklem Hintergrund.
videoload/jsfiddle-dark.jpg

Fehlt der Parameter, wird color-dark als Standard verwendet.

scope — Umfang der Darstellung einstellen

Mithilfe des Parameters scope lässt sich festlegen, welche der jsfiddle-Bereiche im Rahmen der Einbettung angezeigt werden. Der Parameterwert besteht aus einer frei wählbaren Kombination der Kennungen js (für JavaScript-Code), html (für HTML-Code), css (für CSS-Code) und result (für die Anzeige des jeweiligen Ergebnisses), jeweils getrennt durch ein Komma, jedoch ohne Leerzeichen. Die Reihenfolge ist beliebig. Einige Beispiele:

ParameterBedeutung/Wirkung
scope-js,html,css,resultDer eingebettete jsfiddle-iFrame soll alle 4 Bereiche anzeigen.
scope-js,html,resultCSS soll nicht angezeigt werden.
scope-html,css,resultJavaScript soll nicht angezeigt werden.
scope-htmlEs soll nur der HTML-Code gezeigt werden.
Beispiele

Aus einem jsfiddle soll das CSS und das HTML zusammen mit dem Ergebnis angezeigt werden (helles Farbschema). Der zugehörige Videoload-Befehl hieße dann:

<div class="html5video jsfiddle color-light scope-css,html,result" id="NeonWilderness/m3u0ogx6/9"></div> …

In einem dunklem JSFiddle soll ein Stück JavaScript-Code dargestellt werden:

<div class="html5video jsfiddle color-dark scope-js" id="NeonWilderness/m3u0ogx6/9"></div> …

Da color-dark die Standardeinstellung ist, könnte der Parameter auch weggelassen werden.

Wie finde ich die ID eines JSFiddle-Elements?

Slides.com ist eine Plattform für Präsentationen. Folgende Parameter sind möglich:

color — Farbschema festlegen

Slides.com bietet zwei Farbschemata an:

ParameterBedeutung/Wirkung
color-lightHelles Farbschema: dunkle Schrift auf hellem Hintergrund.
color-darkDunkles Farbschema: helle Schrift auf dunklem Hintergrund.

Fehlt der Parameter, wird color-dark als Standard verwendet. Die Variante light wird derzeit durch slides.com nur aktiviert, wenn keine Startseite spezifiziert wurde.

Beispiele

Es soll eine Slides-Präsentation mit der ID 'bahmutov/working-software' und hellem Farbschema in einem Blogbeitrag eingebunden werden:

<div class="html5video slides color-light" id="bahmutov/working-software"></div> …

Wie finde ich die ID einer Slides-Präsentation?

Slideshare ist eine Plattform für Präsentationen. Folgende Parameter sind möglich:

slide — Präsentation ab einer bestimmten Seite starten

Falls Sie die Slideshare-Präsentation nicht von Anfang an, sondern ab einer bestimmten Seite ("Slide") starten wollen, können Sie dies mit dem slide-Parameter einstellen. Im Parameterwert wird die gewünschte Startseite spezifiziert. Das Videoload-Beispiel

<div class="html5video slideshare slide-3" id="{eine-slideshare-id}"></div>

startet die Präsentation auf der dritten Seite.

Beispiele

Es soll eine Slideshare-Präsentation mit der ID 'v2pxR8RN6Bl5Ve' in einem Blogbeitrag eingebunden werden:

<div class="html5video slideshare" id="v2pxR8RN6Bl5Ve"></div> …

Soll die Präsentation ab Seite 2 starten, lautet der Videoload-Befehl:

<div class="html5video slideshare slide-2" id="v2pxR8RN6Bl5Ve"></div> …

Wie finde ich die ID einer Slideshare-Präsentation?

Soundcloud ist eine Musikplattform, deren Audiosamples in Webseiten eingebettet und abgespielt werden können. Folgende Parameter sind möglich:

stripe — Audioelement im schmalen Layout anzeigen

Im Standard werden Soundcloud-Elemente mit einer Höhe von 450 Pixel formatiert. Wenn Sie eine schmalere Anzeige vorziehen, können Sie in der DIV-Klasse den Parameter stripe ergänzen. Dies bewirkt, dass das Audiostück auf ein Drittel der Standardhöhe (=150 Pixel) verkleinert wird.

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

linkcol — Farbe des Soundcloud-Playbuttons festlegen

Im Modus stripe können Sie zusätzlich eine individuelle Farbe des Playbuttons festlegen. Standardmäßig wird dieser orange angezeigt. Mithilfe des linkcol Parameters können Sie jede gewünschte Farbe als 6-stelligen Hexwert definieren.

<div class="html5video soundcloud stripe linkcol-00aabb" id="{eine-soundcloud-id}"></div>

Beispiele

Das Stück Warm Blood der Gruppe The Beths soll als Soundcloud-Element in einem Blogbeitrag eingebunden werden:

<div class="html5video soundcloud" id="420191188"></div> …

In der schmaleren Variante lautet der Videoload-Befehl:

<div class="html5video soundcloud stripe" id="420191188"></div> …

Zusätzlich soll der Playbutton in der Farbe #6e24cc angezeigt werden:

<div class="html5video soundcloud stripe linkcol-6e24cc" id="420191188"></div> …

Wie finde ich die ID eines Soundcloud-Audioelements?

Speakerdeck ist eine Plattform für Präsentationen. Folgende Parameter sind möglich:

slide — Präsentation ab einer bestimmten Seite starten

Falls Sie die Speakerdeck-Präsentation nicht von Anfang an, sondern ab einer bestimmten Seite ("Slide") starten wollen, können Sie dies mit dem slide-Parameter einstellen. Im Parameterwert wird die gewünschte Startseite spezifiziert. Das Videoload-Beispiel

<div class="html5video speakerdeck slide-3" id="23e87b703e9c0132341052932d7daf42"></div> …

startet die Präsentation auf der dritten Seite.

Beispiele

Es soll eine Speakerdeck-Präsentation mit der ID '23e87b703e9c0132341052932d7daf42' in einem Blogbeitrag eingebunden werden:

<div class="html5video speakerdeck" id="23e87b703e9c0132341052932d7daf42"></div> …

Soll die Präsentation ab Seite 2 starten, lautet der Videoload-Befehl:

<div class="html5video speakerdeck slide-2" id="23e87b703e9c0132341052932d7daf42"></div> …

Wie finde ich die ID einer Speakerdeck-Präsentation?

TED ist eine Plattform mit Videos von kurzen, thematisch gebundenen Reden/Präsentationen. Folgende zusätzlicher Parameter ist möglich:

lang — Video mit deutschen Untertiteln abspielen

Falls das TED-Video über deutsche Untertitel verfügt, können Sie diese mit dem lang-Parameter aktivieren:

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

zeigt während des Videos deutsche Untertitel an.

Wenn Sie den lang-Parameter aktivieren, muss sichergestellt sein, dass dieses TED-Video auch über deutsche Untertitel verfügt — ansonsten wird ein Fehler angezeigt. Entfernen Sie im Fehlerfall die Ergänzung lang.

Prüfen auf deutsche Untertitel

Um zu prüfen, ob für ein TED-Video deutsche Untertitel zur Verfügung stehen, gehen Sie in der Einzelansicht des Videos auf das "Subtitle"-Icon 1 und klicken dann auf "More languages" 2. Wenn in der Auflistung auch ein Eintrag für die deutsche Sprache angezeigt wird, können Sie den lang-Parameter verwenden:

videoload/ted-lang.jpg
Beispiele

Es soll eine TED-Rede mit der ID 'wanis_kabbaj_what_a_driverless_world_could_look_like' in einem Blogbeitrag eingebunden werden:

<div class="html5video ted" id="wanis_kabbaj_what_a_driverless_world_could_look_like"></div> …

Soll das Video mit deutschen Untertiteln abgespielt werden, lautet der Videoload-Befehl:

<div class="html5video ted lang" id="wanis_kabbaj_what_a_driverless_world_could_look_like"></div> …

Wie finde ich die ID eines TED-Videos?

Vimeo ist ein Videoanbieter. Folgender zusätzlicher Parameter ist möglich:

linkcol — Farbe für Links festlegen

Sie können die Farbe der Vimeo-Links auf dem Video einstellen. Dies empfiehlt sich z.B., wenn durch den Hintergrund des Videos die Links nur schlecht sichtbar sind. Wählen Sie dann eine passende Farbe aus und ergänzen diese im Parameter linkcol-ffffff. Fehlt der Parameter, wird standardmäßig die Linkfarbe '00adef' verwendet.

Farbcodes werden als 6-stellige Hexadezimalzahl kodiert. Welche Farbe welchen Hexcode besitzt, können Sie z.B. auf dieser Webseite herausfinden.

Beispiele

Es soll ein Vimeo-Video mit der ID '125947740' in Superbreitbild in einem Blogbeitrag eingebunden werden:

<div class="html5video vimeo ratio-2.37037" id="125947740"></div> …

Das Vimeo-Video soll zusätzlich mit der Linkfarbe 'c9ff23' angezeigt werden:

<div class="html5video vimeo linkcol-c9ff23 ratio-2.37037" id="125947740"></div> …

Wie finde ich die ID eines Vimeo-Videos?

Vine ist ein Videoportal zum Austausch sehr kurzer Filmaufnahmen (6 Sekunden). Er verfügt über keine besonderen Parameter.

Beispiel

Es soll ein Vine-Video mit der ID 'en37tTq6YZa' in einem Blogbeitrag eingebunden werden:

<div class="html5video vine" id="en37tTq6YZa"></div> …

Vine-Videoclips weisen meist die gleiche Höhe wie Breite auf, daher ist es ratsam, den Parameter ratio-1 zu ergänzen, um das korrekte Aspektverhältnis einzustellen.

<div class="html5video vine ratio-1" id="en37tTq6YZa"></div> …

Wie finde ich die ID eines Vine-Videos?

Youtube ist ein Videoanbieter. Folgende zusätzliche Parameter sind möglich:

start — Video an einer bestimmten Stelle starten

Um ein youtube-Video an einer gewünschten Stelle zu starten, z.B. bei 02:15 (Minuten:Sekunden), rechnen Sie die
Zeitangabe in Sekunden um (im Beispiel 02:15 = 2*60+15 = 135) und fügen das Ergebnis als Parameterwert an die Kennung
start. Das vollständige Kommando lautet dann folgendermaßen:

<div class="html5video youtube start-135" id="{eine-youtube-ID}"></div>

endat — Video an einer bestimmten Stelle beenden

Das Gegenstück zum start-Parameter ist die endat-Anweisung. Hiermit lässt sich das gewählte Video an einer bestimmten Stelle vorzeitig beenden. Um die Videoanzeige z.B. bei Stelle 05:20 (Minuten:Sekunden) zu stoppen, rechnen Sie die Zeitangabe in Sekunden um (im Beispiel 05:20 = 5*60+20 = 320) und fügen das Ergebnis als Parameterwert an die Kennung endat. Das vollständige Kommando lautet dann folgendermaßen:

<div class="html5video youtube endat-320" id="{eine-youtube-ID}"></div>

Die endat-Anweisung kann alleine oder in Kombination mit dem start-Parameter verwendet werden.

Wie finde ich die ID eines Youtube-Videos?

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

<div class="html5video other ratio-2.4" id="https://neonwilderness.de/public/movies/oceans-clip.mp4"></div> …

poster — Posterbild für MP4-Videodatei festlegen

Ü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 https://www.meinewebadresse.de/videos/meinvideo.mp4 zu finden ist, muss ein zugehöriges jpg-Standbild die Adresse https://www.meinewebadresse.de/videos/meinvideo.jpg besitzen. Für die Anzeige eines Standbilds ergänzen Sie einfach poster als zusätzlichen Parameterwert.

<div class="html5video other ratio-2.4 poster" id="https://neonwilderness.de/public/movies/oceans-clip.mp4"></div> …

image — Dateityp des Posterbilds festlegen

Ist das Standbild nicht vom Typ jpg (Standard), 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 und einem gif-Standbild lautete der DIV-Befehl dann so:

<div class="html5video other width-500 poster image-gif" id="https://neonwilderness.de/public/movies/nodejs.mp4"></div> …

autoplay — MP4-Videodatei automatisch starten

Dieser Parameter führt dazu, dass das MP4-Video automatisch gestartet und im Endlosmodus gezeigt wird, d.h. am Ende des Videos startet es erneut am Anfang.

<div class="html5video other width-400 poster autoplay" id="https://neonwilderness.de/public/images/zEeJS7a.mp4"></div> …

Wie finde ich die ID eines MP4-Videos?

 zum Tabellenanfang

Außergewöhnliches
Dinge, die gut sind
Entgleisungen
Gemalte Lebenserfahrung
Musik
Nachtgedanken
Neon-Award
Neon's Must-Have-Tools
Neon's Top10 List
Schöner Bloggen
Today I Learned
Wort des Tages
Profil
Abmelden
Weblog abonnieren
Meine Layouts
Meine bearbeiteten Skins
Hauptseite (Site.page)
Toolbar (Site.foundationToolbar)
Github Neon
Gitlab twoday.net
Font Awesome Cheatsheet v4