In a neon wilderness: Anbieterdoku (siehe "Videoload2"-Artikel)

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:

Parameter	Bedeutung/Wirkung
layout-standard	Anzeige des Standard-Layouts. Variable Höhe (min. 120 Pixel).
layout-slim	Schmales Layout. Höhe 42 Pixel.
layout-artworkonly	Ausschließ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:

Parameter	Bedeutung/Wirkung
artwork-none	Die Artwork wird nicht angezeigt. Wirkt in Verbindung mit layout-slim und layout-standard.
artwork-show	Die Artwork wird angezeigt. Wirkt in Verbindung mit layout-slim.
artwork-big	Die Artwork wird groß angezeigt. Wirkt in Verbindung mit layout-standard.
artwork-small	Die 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:

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

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

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:

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:

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:

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.

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:

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:

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:

Parameter	Bedeutung/Wirkung
color-light	Helles Farbschema: dunkle Schrift auf hellem Hintergrund.
color-dark	Dunkles Farbschema: helle Schrift auf dunklem Hintergrund.

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:

Parameter	Bedeutung/Wirkung
scope-js,html,css,result	Der eingebettete jsfiddle-iFrame soll alle 4 Bereiche anzeigen.
scope-js,html,result	CSS soll nicht angezeigt werden.
scope-html,css,result	JavaScript soll nicht angezeigt werden.
scope-html	Es 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:

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

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:

Parameter	Bedeutung/Wirkung
color-light	Helles Farbschema: dunkle Schrift auf hellem Hintergrund.
color-dark	Dunkles 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:

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

startet die Präsentation auf der dritten Seite.

Beispiele

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

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

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.

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.

Beispiele

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

In der schmaleren Variante lautet der Videoload-Befehl:

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

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

startet die Präsentation auf der dritten Seite.

Beispiele

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

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

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:

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:

Beispiele

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

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

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:

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

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:

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.

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:

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:

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:

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.

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:

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.

Wie finde ich die ID eines MP4-Videos?

zum Tabellenanfang

NeonWilderness

11850 Kommentare Kommentar verfassen

In a neon wilderness he was restless

Anbieterdoku (siehe "Videoload2"-Artikel)

layout — Layout festlegen

artwork — Anzeige/Größe der Artwork einstellen

bgcol — Hintergrundfarbe festlegen

linkcol — Farbe für Links festlegen

tracklist — Anzeige der Tracklist aktivieren

Beispiele

Bandcamp-ID manuell ermitteln

start — Video an einer bestimmten Stelle starten

Dailymotion-ID manuell ermitteln

start — Video an einer bestimmten Stelle starten

DCTP-ID manuell ermitteln

Beispiel

Filmstarts-ID manuell ermitteln

asimage — Das Giphy-Objekt als einfaches Bild einbinden

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

Giphy-ID manuell ermitteln

Beispiel

Itemfix-ID manuell ermitteln

color — Farbschema festlegen

scope — Umfang der Darstellung einstellen

Beispiele

JSFiddle-ID manuell ermitteln

color — Farbschema festlegen

Beispiele

Slides-ID manuell ermitteln

slide — Präsentation ab einer bestimmten Seite starten

Beispiele

Slideshare-ID manuell ermitteln

stripe — Audioelement im schmalen Layout anzeigen

linkcol — Farbe des Soundcloud-Playbuttons festlegen

Beispiele

Soundcloud-ID manuell ermitteln

slide — Präsentation ab einer bestimmten Seite starten

Beispiele

Speakerdeck-ID manuell ermitteln

lang — Video mit deutschen Untertiteln abspielen

Prüfen auf deutsche Untertitel

Beispiele

TED-ID manuell ermitteln

linkcol — Farbe für Links festlegen

Beispiele

Vimeo-ID manuell ermitteln

Beispiel

Vine-ID manuell ermitteln

start — Video an einer bestimmten Stelle starten

endat — Video an einer bestimmten Stelle beenden

Youtube-ID manuell ermitteln

poster — Posterbild für MP4-Videodatei festlegen

image — Dateityp des Posterbilds festlegen

autoplay — MP4-Videodatei automatisch starten

ID eines MP4-Videos ermitteln

Weeping Willow

This Time

Catching the butterfly