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:
<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?
Bandcamp-ID manuell ermitteln
Die Ermittlung einer Bandcamp-ID erfordert verschiedene Schritte:
- Sobald Sie auf der Einzelseite des gewünschten Musikstücks/Albums sind, klicken Sie auf Share / Embed
- Klicken Sie in dem erscheinenden Popup-Fenster auf Embed this album
- Klicken Sie auf eine der drei Layout-Grafiken
- Klicken Sie in das Feld Embed, welches den <iframe>-Code enthält und
kopieren Sie diesen mit Strg-C (Windows) oder Cmd-C (Mac) in die Zwischenablage. - Öffnen Sie einen Texteditor (z.B. Notepad in Windows) und fügen Sie den Text aus der Zwischenablage ein (Strg-V in Windows, Cmd-V für Mac).
Der markierte Albumcode ist die gesuchte ID.
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?
Dailymotion-ID manuell ermitteln
Sobald Sie die Einzelansicht des gewünschten Videos auf der Dailymotion-Seite aufgerufen haben, können Sie die benötigte ID des Objekts aus mehreren Quellen ablesen/kopieren:
- Oben aus der angezeigten Browser-URL:
- Weiter unten aus der angezeigten Kurz-URL:
- Unten aus der angezeigten iframe-Einbettungscode (diesen dazu am besten in einen Texteditor kopieren):
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?
DCTP-ID manuell ermitteln
Sobald Sie die Einzelansicht des gewünschten Filmbeitrags auf der DCTPtv-Seite aufgerufen haben, können Sie die benötigte ID des Objekts aus verschiedenen Quellen ermitteln:
- Oben aus der angezeigten Browser-URL (die einfachste Methode):
- Alternativ klicken Sie auf das Einbettungssymbol:
- danach auf eine der beiden Schaltflächen von Anfang an oder ab dieser Stelle:
- Klicken Sie nun auf die Schaltfläche Embedcode kopieren:
- Fügen Sie den kopierten Einbettungscode in einen geöffneten Texteditor ein. Der blau markierte Text entspricht der ID.
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?
Filmstarts-ID manuell ermitteln
Sobald Sie die Einzelansicht des gewünschten Videos auf der filmstarts-Seite aufgerufen haben, können Sie die benötigte ID des Objekts aus verschiedenen Quellen ermitteln:
- Oben aus der angezeigten Browser-URL (die einfachste Methode):
- Alternativ klicken Sie auf das Symbol TEILEN und danach auf </> EMBED:
- Der Einbettungsbefehl ist damit in die Zwischenablage kopiert und kann in einen Texteditor eingefügt werden.
Der markierte Text entspricht der ID.
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:
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?
Giphy-ID manuell ermitteln
Sobald Sie die Einzelansicht des gewünschten GIFs auf der Giphy-Seite aufgerufen haben, können Sie die benötigte ID des Objekts aus zwei Quellen kopieren:
- Oben aus der angezeigten Browser-URL:
- Unten aus dem angezeigten iframe-Einbettungscode:
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?
Itemfix-ID manuell ermitteln
Sobald Sie die Einzelansicht des gewünschten Videos auf der itemfix-Seite aufgerufen haben, können Sie die benötigte ID des Objekts folgendermaßen ermitteln:
- Oben aus der angezeigten Browser-URL (die einfachste Methode):
- Klicken Sie auf die Schaltfläche Share:
Kopieren Sie den angezeigten iframe-Einbettungscode am besten in einen Texteditor. Der markierte Text entspricht der ID.
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.
![videoload/jsfiddle-light.jpg]() |
color-dark | Dunkles 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:
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:
<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?
JSFiddle-ID manuell ermitteln
Für die Ermittlung einer JSFiddle-ID gibt es verschiedene Möglichkeiten:
- Oben aus der angezeigten Browser-URL (die einfachste Methode):
- Alternativ klicken Sie oben auf den Menü-Tab Embed
- Klicken Sie auf Prefer iframe? und dann in das Feld Embed Code,
welches den <iframe>-Code enthält und kopieren Sie diesen mit Strg-C
(Windows) oder Cmd-C (Mac) in die Zwischenablage. - Öffnen Sie einen Texteditor (z.B. Notepad in Windows) und fügen Sie den Text aus der Zwischenablage ein (Strg-V in Windows, Cmd-V für Mac).
Der markierte Code (alles zwischen 'jsfiddle.net/' und '/embedded') entspricht der gesuchten ID.
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:
<div class="html5video slides color-light" id="bahmutov/working-software"></div> …
Wie finde ich die ID einer Slides-Präsentation?
Slides-ID manuell ermitteln
Sobald Sie in der Einzelansicht der Slides-Präsentation sind, können Sie mit folgenden Schritten die ID ermitteln:
- Oben aus der angezeigten Browser-URL (die Zeichenkette nach slides.com/ bis zum #):
- Klicken Sie unter der Präsentation auf die Schaltfläche Share:
- Klicken Sie im angezeigten Fenster in das Feld Presentation Link und kopieren Sie die Linkadresse mit Strg-C
(Windows) oder Cmd-C (Mac) in die Zwischenablage. Der Text hinter 'https://slides.com/' ist die gesuchte ID.
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?
Slideshare-ID manuell ermitteln
Sobald Sie in der Einzelansicht der Slideshare-Präsentation sind, können Sie mit folgenden Schritten die ID ermitteln:
- Klicken Sie unter der Präsentation auf die Schaltfläche Share:
- Klicken Sie im angezeigten Fenster in das Embed-Feld und kopieren Sie dann den Einbettungscode mit Strg-C
(Windows) oder Cmd-C (Mac) in die Zwischenablage. - Öffnen Sie einen Texteditor (z.B. Notepad in Windows) und fügen Sie den Text aus der Zwischenablage ein (Strg-V in Windows, Cmd-V für Mac).
Der blau markierte Text hinter der Kennung "/key/" entspricht der gesuchten ID.
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?
Soundcloud-ID manuell ermitteln
Sobald Sie in der Einzelansicht des Soundcloud-Musikstücks sind, können Sie mit folgenden Schritten die ID ermitteln:
- Klicken Sie unter der Audioanzeige auf die Schaltfläche Share:
- Klicken Sie anschließend auf Embed:
- Klicken Sie im angezeigten Fenster in das Code and preview-Feld und kopieren Sie den Einbettungscode mit Strg-C
(Windows) oder Cmd-C (Mac) in die Zwischenablage. - Öffnen Sie einen Texteditor (z.B. Notepad in Windows) und fügen Sie den Text aus der Zwischenablage ein (Strg-V in Windows, Cmd-V für Mac).
Der blau markierte Text hinter der Kennung "/tracks/" entspricht der gesuchten ID.
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?
Speakerdeck-ID manuell ermitteln
Sobald Sie in der Einzelansicht der Speakerdeck-Präsentation sind, können Sie mit folgenden Schritten die ID ermitteln:
- Klicken Sie im Bereich Share auf < />Embed:
- Klicken Sie im angezeigten Popup-Fenster oben auf Embed und kopieren Sie dann den Embed-Code mit Strg-C
(Windows) oder Cmd-C (Mac) in die Zwischenablage. - Öffnen Sie einen Texteditor (z.B. Notepad in Windows) und fügen Sie den Text aus der Zwischenablage ein (Strg-V in Windows, Cmd-V für Mac).
Der blau markierte Text im Feld data-id entspricht der gesuchten ID.
Spotify ist eine Musik-Streamingplattform, deren Audios in Webseiten eingebettet und abgespielt werden können. Folgende Parameter sind möglich:
stripe — Audioelement im schmalen Layout anzeigen
Im Standard werden spotify-Elemente mit einer Höhe von 352 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 eine Standardhöhe von 152 Pixel verkleinert wird.
<div class="html5video spotify stripe" id="{eine-spotify-id}"></div>
dark — Theme-Farbe des spotify-Elements festlegen
Standardmäßig wird für die Hintergrundfarbe des spotify-Elements automatisch eine zum Cover passende Farbe gewählt. Mithilfe des dark Parameters können Sie als Hintergrundfarbe ein dunkles Grau festlegen (RGB-Wert: #1F1F1F).
<div class="html5video spotify stripe dark" id="{eine-spotify-id}"></div>
Beispiele
Das Stück Saturday Morning der Gruppe Eels soll als spotify-Element großformatig in einem Blogbeitrag eingebunden werden:
<div class="html5video spotify" id="5xgc9f81pwMCJ3YO19FZza"></div> …
In der schmaleren Variante und mit dunklem Hintergrund lautet der Videoload-Befehl:
<div class="html5video spotify stripe dark" id="5xgc9f81pwMCJ3YO19FZza"></div> …
Wie finde ich die ID eines spotify-Audioelements?
Spotify-ID manuell ermitteln
Sobald Sie in der Einzelansicht des spotify-Musikstücks sind, können Sie mit folgenden Schritten die ID ermitteln:
- Klicken Sie unter der Audioanzeige auf die drei Punkte:
- Klicken Sie anschließend im Menü auf Teilen → Song einbetten:
- Klicken Sie im angezeigten Fenster auf das Code anzeigen-Feld und kopieren Sie den Einbettungscode mit Strg-C
(Windows) oder Cmd-C (Mac) in die Zwischenablage. - Öffnen Sie einen Texteditor (z.B. Notepad in Windows) und fügen Sie den Text aus der Zwischenablage ein (Strg-V in Windows, Cmd-V für Mac).
Der blau markierte Text hinter der Kennung "/track/" entspricht der gesuchten ID.
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:
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?
TED-ID manuell ermitteln
Sobald Sie sich in der Einzelansicht des gewünschten TED-Videos befinden, können Sie oben aus der Browser-URL die gesuchte ID ermitteln (die Zeichenkette hinter /talks/):
Tenor ist eine von Google betriebene Suchmaschine zum Finden von animierten Bilddateien im Graphics Interchange Format (GIF). Tenor wird u.a. auch für die GIF-Tastaturen bei Android, iOS und macOS verwendet.
Beispiel
Es soll ein Tenor-Video mit der ID '15140161' in einem Blogbeitrag eingebunden werden:
<div class="html5video tenor width-400" id="15140161"></div> …
Wie finde ich die ID eines Tenor-GIFs?
Tenor-ID manuell ermitteln
Sobald Sie die Einzelansicht des gewünschten GIFs/Bildes auf der tenor-Seite aufgerufen haben, können Sie die benötigte ID des Objekts folgendermaßen ermitteln:
- Oben aus der angezeigten Browser-URL (die einfachste Methode):
- Weiter unten auf der Tenor-Seite steht unter der Überschrift "Einbetten" u.a. das Feld data-postid. Die dort angezeigt Nummer ist die ID des Bildes.
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?
Vimeo-ID manuell ermitteln
Sobald Sie die Einzelansicht des gewünschten Videos auf der Vimeo-Seite aufgerufen haben, können Sie die benötigte ID des Objekts aus verschiedenen Quellen ermitteln:
- Oben aus der angezeigten Browser-URL (die einfachste Methode):
- Alternativ klicken Sie auf das Symbol Share:
- danach können Sie die ID vom Ende des Links oder aus dem Einbettungsbefehl kopieren (am besten mithilfe einen Texteditors):
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?
Youtube-ID manuell ermitteln
Sobald Sie die Einzelansicht des gewünschten Videos auf der Youtube-Seite aufgerufen haben, können Sie die benötigte ID des Objekts folgendermaßen ermitteln:
- Oben aus der angezeigten Browser-URL (die einfachste Methode):
- Alternativ klicken Sie auf den Teilen-Link und kopieren die ID aus der angezeigten URL:
- Es ist auch möglich, die ID aus dem Einbettungsbefehl zu kopieren (am besten mithilfe einen Texteditors):
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?
ID eines MP4-Videos ermitteln
Wie und wo Sie die vollständige Adresse des gewünschten MP4-Videos finden und kopieren können, hängt natürlich vom jeweiligen Anbieter ab. Dafür gibt es keine allgemeingültige Vorgehensweise. Nachstehend sind zwei Beispiele für Photobucket und Dropbox aufgeführt:
- Photobucket: Klicken Sie unter der Share this video auf den "Direct Link":
- Dropbox: Klicken Sie im Dateiexplorer mit rechter Maustaste auf den gewünschten MP4-Clip in Ihrer Dropbox.
Klicken Sie im angezeigten Menü auf "Öffentlichen Link kopieren":
zum Tabellenanfang