Verwandte Videos
JavaScript-API Grundlagen

Einbinden von Videos

Hier finden Sie eine Beschreibung der JavaScript-API, um Videos von OXOMI in Ihre Webseite oder Webanwendung einzubetten. Wenn Sie die Funktionen testen möchten, dann finden Sie im Bereich Beispiele entsprechenden Code zum Testen.

Markenübersicht für Videos

Binden Sie eine Markenübersicht von Videos mit der Funktion oxomi.videoBrands ein. Mit Klick auf eine Marke erscheinen die entsprechenden Videos der jeweiligen Marke.

Parameter Beschreibung

target

Gibt das Ziel-Element an, in welches die Markenübersicht eingefügt wird. Wird dieser Parameter nicht angegeben, so wird #oxomi-brands als Standard-Wert verwendet. Falls das Ziel-Element sich innerhalb eines scrollbaren Containers befindet, muss dieser Container unter dem Parameter scrollContainer angegeben werden.

brandCategory

Gibt den Namen einer gewünschten Kategorie an.

brandTag

Gibt einen Tag an, nach dem gefiltert werden soll.

brandSortBy

Legt die Sortierung der Markenübersicht fest. Die nachfolgenden Werte stehen hier zur Verfügung.

Wert	Beschreibung
priority	Standard-Sortierung nach Priorität, kleinste Prioritäts-Zahl wird zuerst gezeigt. Bei gleicher Priorität wird alphanumerisch sortiert. Dies ist der verwendete Standard-Wert.
name	Sortiert alphanumerisch nach dem Namen
date	Sortierung nach Datum. Neuste Objekte werden zuerst gezeigt
random	Das Ergebnis ist zufällig gemischt

brandGroupBy

Lässt das Ergebnis gruppiert zurückgeben, falls angegeben. Mögliche Gruppierungen sind:

Wert	Beschreibung
category	Gruppiert nach Kategorie
brand	Gruppiert nach Marke
type	Gruppiert nach Typ
tag	Gruppiert nach Tags

Hinweis: Falls gruppiert wird, so wird eine andere Struktur des Ergebnisobjekts zurückgegeben.

brandLimit

Begrenzt die Anzahl der angezeigten Ergebnisse. Standard-Wert ist 1024 (max. 2048)

brandSearch

Gibt an, ob zusätzlich auch ein Sucheingabefeld eingebunden wird. Das hier verwendete Template kann über den Parameter searchBarTemplate geändert werden.

own

Wird dieser Parameter auf false gesetzt, so wird die eigene Marke aus der Ergebnisliste entfernt. Um keine Filterung vorzunehmen, müssen Sie den Filter leer lassen.

brandPriorityStart

Ist dieser Parameter gefüllt, erscheinen im Ergebnis nur Marken, deren Markenpriorität gleich oder höher als dieser Wert ist.

brandPriorityEnd

Ist dieser Parameter gefüllt, erscheinen im Ergebnis nur Marken, deren Markenpriorität gleich oder niedriger als dieser Wert ist.

Nachfolgende Parameter sind nur für PRO Portale verfügbar:

Parameter	Beschreibung
lang	Gibt die Sprache (als 2-buchstabigen ISO-Code) an, nach der gefiltert werden soll.
country	Gibt das Land (als 2-buchstabigen ISO-Code) an, nach dem gefiltert werden soll.

Neben den hier angegebenen Parametern zur Filterung der anzuzeigenden Marken, können zusätzlich noch die Parameter von oxomi.videos angegeben werden, um die entsprechende Listen-Darstellung mit den verknüpften Videos zu filtern.

Beispiel:

oxomi.videoBrands({ brandCategory: 'Sanitär',
                    brandSearch: true });

Videos anzeigen

Benutzen Sie hierfür die Funktion oxomi.videos. Diese Funktion findet alle Videos des angegeben Lieferanten. Das erhaltene Ergebnis wird in das definierte target gerendert.

Parameter Beschreibung

target

Gibt das Ziel-Element an, in welches die Videos eingefügt werden. Wird dieser Parameter nicht angegeben, so wird #oxomi-videos als Standard-Wert verwendet. Falls das Ziel-Element sich innerhalb eines scrollbaren Containers befindet, muss dieser Container unter dem Parameter scrollContainer angegeben werden.

supplierNumber

Gibt die Lieferantennummer an für den Fall, dass die Werksnummer nicht eindeutig ist. Hier können Sie Ihre eigenen Lieferantennummern verwenden, wenn Sie diese in der Partnerschaft zum Lieferanten gepflegt haben (siehe: Lieferantennummern).

excludedSupplierNumbers

Hiermit können Sie Lieferantennummern ausschließen.

brand

Gibt einen Markennamen an, der als Auswahlkriterium verwendet wird. Beachten Sie, dass Groß-Kleinschreibung hierbei berücksichtigt wird.

Hinweis: Falls Sie die ID der gewünschten Marke kennen, können Sie alternativ auch mit dem Parameter brandId arbeiten.

tag

Gibt einen Tag an, nach dem gefiltert werden soll. Geben Sie mehrere Tags durch Kommas getrennt an.

sortBy

Legt eine Sortierung fest. Die nachfolgenden Werte stehen hier zur Verfügung.

Wert	Beschreibung
date	Sortierung nach Datum, neuste Videos werden zuerst gezeigt. Dies ist der verwendete Standard-Wert.
priority	Sortierung nach Marken-Priorität & Marken-Namen. Bei gleicher Marke werden die Videos alphanumerisch nach dem Videonamen sortiert.
name	Sortiert alphanumerisch nach dem Namen. Keine Markensortierung.
random	Das Ergebnis ist zufällig gemischt.

groupBy

Lässt das Ergebnis gruppiert zurückgeben, falls angegeben. Mögliche Gruppierungen sind:

Wert	Beschreibung
category	Gruppiert nach Kategorie
brand	Gruppiert nach Marke
type	Gruppiert nach Typ
tag	Gruppiert nach Tags

Hinweis: Falls gruppiert wird, so wird eine andere Struktur des Ergebnisobjekts zurückgegeben.

groupFilter

Wird dieser Parameter auf true gesetzt und der Parameter groupBy ist gesetzt, werden über dem Ergebnis Schaltflächen zur Filterung durch den Nutzer auf einzelne Gruppen angezeigt.

start

Definiert wieviel Elemente in der Ergebnisliste übersprungen werden. Soll z.B. mit dem Dritten Element begonnen werden, dann tragen Sie hier den Wert 2 ein.

Hinweis: Nutzen Sie diesen Parameter, um "seitenweise" durch die Ergebnismenge zu navigieren.

limit

Begrenzt die Anzahl der angezeigten Ergebnisse. Standard-Wert ist 128 (max. 1024)

type

Gibt den Video-Typ an, nach dem gefiltert werden soll. Verwenden Sie hier die entsprechenden Typen-Codes. Als Trennzeichen mehrerer Video-Typen wird | unterstützt.

category

Definiert den Namen einer Kategorie als Auswahlkriterium. Um mehrere Kategorien auszuwählen benutzten Sie | als Trennzeichen.

own

Wird dieser Parameter auf true gesetzt, so werden ausschließlich eigene Videos angezeigt. Bei false werden ausschließlich Videos von anderen Anbietern angezeigt. Um keine Filterung vorzunehmen, müssen Sie den Filter leer lassen.

mode

Legt fest, wie das Video abgespielt werden soll. Zur Verfügung stehen:

overlay: Vorschaubild einbetten und Video in Overlay öffnen, wenn diese abgespielt werden soll. (Standard)
in-place: Vorschaubild einbetten und durch Video-Player ersetzen, wenn dieses abgespielt werden soll.

width

Gibt die Breite für die Videos vor. Beachten Sie die mehreren Möglichkeiten, die Sie haben um die Breite für eine passgenaue Integration festzulegen. Weiterlesen

height

Gibt eine explizite Höhe für die Videos vor. Falls nicht angegeben, orientiert sich die Höhe mittels Seitenverhältnis an der festgelegten Breite.

size

Gibt die Größe des Vorschaubildes und Video-Players (mit Ausnahme des Overlays) an:

small: 213x120p
medium: 427x240p (Standard)
large: 854x480p

Dieser Wert wird benutzt, wenn nichts für Breite oder Höhe definiert ist.

search

Belegen Sie diesen Parameter mit dem Wert true, um ein funktionsfähiges Sucheingabefeld mit einzubinden.

showDetails

Belegen Sie diesen Parameter mit dem Wert true, damit der Name des Videos als Beschriftung mit angezeigt wird.

includeOutdated

Belegen Sie diesen Parameter mit dem Wert true, damit auch archivierte Videos in den Ergebnissen angezeigt werden.

onlyOutdated

Belegen Sie diesen Parameter mit dem Wert true, damit nur archivierte Videos in den Ergebnissen angezeigt werden. Dieser Parameter überschreibt den Parameter includeOutdated.

Nachfolgende Parameter sind nur für PRO Portale verfügbar:

Parameter	Beschreibung
lang	Gibt die Sprache (als 2-buchstabigen ISO-Code) an, nach der gefiltert werden soll.
country	Gibt das Land (als 2-buchstabigen ISO-Code) an, nach dem gefiltert werden soll.

Beispiel:

oxomi.videos({supplierNumber: 'L10190',
              target: '#video-div' });

Video-Typen

Die nachfolgendende Liste zeigt alle verfügbaren Video-Typen und die dazugehörigen Codes für die Verwendung in der Integration:

Typ Code	Beschreibung
Produktvideo product	Zeigt das referenzierte Produkt. Dies ist der Standard-Typ für Videos
Anwendungsvideo usage	Zeigt eine Anwendungsmöglichkeit des referenzierten Produkts
Schulungsvideo training	Erklärt den Umgang oder die Verwendung eines oder mehrerer Produkte
Imagevideo image	Präsentiert das Unternehmen, eine Marke oder einen Fachbereich
WebTV webtv	Ein journalistischer Beitrag mit Brancheninformationen
Montagevideo installation	Zeigt die Installation oder den Aufbau eines Produkts.
Q&A Video qa	Weiterbildung, Information oder Antwort auf eine konkrete Frage

Einen Beschreibungstext der jeweiligen Video-Typen finden Sie hinter dem Link.

Videos eines Artikels anzeigen

Benutzen Sie hierfür die Funktion oxomi.itemVideos. Diese Funktion findet alle Videos des angegeben Lieferanten und Artikels. Das erhaltene Ergebnis wird in das definierte target gerendert.

Parameter	Beschreibung
target	Gibt das Ziel-Element an, in welches die Videos eingefügt werden. Wird dieser Parameter nicht angegeben, so wird `#oxomi-videos` als Standard-Wert verwendet. Falls das Ziel-Element sich innerhalb eines scrollbaren Containers befindet, muss dieser Container unter dem Parameter `scrollContainer` angegeben werden.
itemNumber	Gibt die Artikelnummer an, für die Videos gesucht werden sollen.
supplierItemNumber	Gibt die Werksnummer des Artikels an, damit auch Videos des Herstellers gefunden werden können.
supplierNumber	Gibt die Lieferantennummer an für den Fall, dass die Werksnummer nicht eindeutig ist. Hier können Sie Ihre eigenen Lieferantennummern verwenden, wenn Sie diese in der Partnerschaft zum Lieferanten gepflegt haben (siehe: Lieferantennummer).
category	Definiert den Namen einer Kategorie als Auswahlkriterium. Um mehrere Kategorien auszuwählen benutzten Sie `\|` als Trennzeichen.
type	Gibt den Video-Typ an, nach dem gefiltert werden soll. Verwenden Sie hier die entsprechenden Typen-Codes. Als Trennzeichen mehrerer Video-Typen wird `\|` unterstützt.
own	Wird dieser Parameter auf `true` gesetzt, so werden ausschließlich eigene Videos angezeigt. Bei `false` werden ausschließlich Videos von anderen Anbietern angezeigt. Um keine Filterung vorzunehmen, müssen Sie den Filter leer lassen.
mode	Legt fest, wie die Videos abgespielt werden sollen. Zur Verfügung stehen: overlay: Vorschaubild einbetten und Video in Overlay öffnen, wenn diese abgespielt werden soll. (Standard) in-place: Vorschaubild einbetten und durch Video-Player ersetzen, wenn dieses abgespielt werden soll.
width	Gibt die Breite für die Videos vor. Beachten Sie die mehreren Möglichkeiten, die Sie haben um die Breite für eine passgenaue Integration festzulegen. Weiterlesen
height	Gibt eine explizite Höhe für die Videos vor. Falls nicht angegeben, orientiert sich die Höhe mittels Seitenverhältnis an der festgelegten Breite.
size	Gibt die Größe des Vorschaubildes und Video-Players (mit Ausnahme des Overlays) an: small: 213x120p medium: 427x240p (Standard) large: 854x480p Dieser Wert wird benutzt, wenn nichts für Breite oder Höhe definiert ist.
showDetails	Belegen Sie diesen Parameter mit dem Wert `true`, damit der Name des Videos als Beschriftung mit angezeigt wird.
includeOutdated	Belegen Sie diesen Parameter mit dem Wert `true`, damit auch archivierte Dokumente in den Ergebnissen angezeigt werden.
onlyOutdated	Belegen Sie diesen Parameter mit dem Wert `true`, damit nur archivierte Videos in den Ergebnissen angezeigt werden. Dieser Parameter überschreibt den Parameter `includeOutdated`.

Nachfolgende Parameter sind nur für PRO Portale verfügbar:

Parameter	Beschreibung
lang	Gibt die Sprache (als 2-buchstabigen ISO-Code) an, nach der gefiltert werden soll.
country	Gibt das Land (als 2-buchstabigen ISO-Code) an, nach dem gefiltert werden soll.

Beispiel:

oxomi.itemVideos({ supplierNumber: 'L10190',
                   itemNumber: 'A20876',
                   target: '#videos' });

Video einbetten

Benutzen Sie hierfür die Funktion oxomi.embedVideo. Diese Funktion ermöglicht es, ein bestimmtes Video direkt in eine Webseite einzubetten. Hierbei kann sowohl die Größe als auch die Art der Einbettung festgelegt werden.

Die folgenden Arten der Einbettung werden unterstützt. Die genauen Konfigurationswerte finden Sie in der Tabelle der Parameter.

Art	Beschreibung
Vorschau + Overlay	Es wird ein Vorschaubild eingebettet. Wird dies angeklickt, so wird der Video-Player in einem Overlay geöffnet. Dies hat den Vorteil, dass kleinere Bilder verwendet werden können, nachher aber ein großer Video-Player zur Verfügung steht. Weiterhin werden die Ressourcen (Video-Player und Film) erst geladen, wenn ein Video abgespielt wird.
Vorschau + Inline-Player	Es wird ein Vorschaubild eingebettet. Wird dies angeklickt, wird der Video-Player an der Stelle des Vorschaubildes geöffnet. Dies vereinfacht die Benutzerführung. Weiterhin werden die Ressourcen (Video-Player und Film) erst geladen, wenn ein Video abgespielt wird.
Direkter Player	Es wird direkt ein Video-Player an der gewünschten Stelle eingebunden, welcher das Video abspielt. Dies hat den Vorteil, dass alle Ressourcen geladen sind und das Video sofort abspielt. Der Nachteil ist, dass die Ressourcen auch dann geladen werden, wenn kein Video abgespielt werden soll.

Parameter	Beschreibung
target	Gibt das Ziel-Element an, in welches das Video eingefügt wird. Wird dieser Parameter nicht angegeben, so wird `#oxomi-video` als Standard-Wert verwendet.
video	Gibt die ID oder den Code des Videos an, welches eingebettet werden soll. Existieren mehrere Videos mit dem gegebenen Code, wird das aktuellste verwendet.
mode	Gibt den Modus der Einbettung an. Zur Verfügung stehen: overlay: Vorschaubild einbetten und Video in Overlay öffnen, wenn diese abgespielt werden soll. (Standard) in-place: Vorschaubild einbetten und durch Video-Player ersetzen, wenn dieses abgespielt werden soll. embed: Video-Player direkt einbetten
width	Gibt die Breite für das einzubettenede Video vor. Beachten Sie die mehreren Möglichkeiten, die Sie haben um die Breite für eine passgenaue Integration festzulegen. Weiterlesen
height	Gibt eine explizite Höhe für das einzubettende Video vor. Falls nicht angegeben, orientiert sich die Höhe mittels Seitenverhältnis an der festgelegten Breite.
size	Gibt die Größe des Vorschaubildes und Video-Players (mit Ausnahme des Overlays) an: small: 213x120p medium: 427x240p (Standard) large: 854x480p Dieser Wert wird benutzt, wenn nichts für Breite oder Höhe definiert ist.
showDetails	Belegen Sie diesen Parameter mit dem Wert `true`, damit der Name des Videos als Beschriftung mit angezeigt wird.
autoplay	Belegen Sie diesen Parameter mit `true`, damit das Video nach dem Laden sofort abgespielt wird.

Beispiel:

oxomi.embedVideo({ video: '0815',
                   mode: 'in-place',
                   size: 'medium',
                   target: '#video-div' });

Breite definieren

Sie haben mehrere Möglichkeiten die Breite des einzubettenden Videos festzulegen. In der nachfolgenden Tabelle finden Sie eine detaillierte Beschreibung.

	Beschreibung	Anwendungsfall
Feste Breite	Eine feste Breite in Pixel, z. B. `512`	Sie haben ein pixelgenaues Layout und wollen das Video darin passend einbetten.
Ausfüllende Breite	`inherit`	Das eingebettete Video soll die Breite des umschließenden Elements übernehmen und es so ausfüllen.
Orientierung an Spalten-Layout	Definieren Sie hier eine Klasse, die eine Spaltenbreite repräsentiert, z.B. `.span4`	Das Video soll sich an dem Spalten-Layout eines Grid-Systems orientieren.
Ohne vorgelegte Größe	Definieren Sie `-` als Wert	Der einbettende Code soll keine Größe festsetzen, damit diese mit eigenem CSS einfacher angepasst werden kann.

Video öffnen

Diese Funktion ermöglicht es, ein bestimmtes Video zu öffnen. Da hier auf den Code des Videos verwiesen wird, kann das Video innerhalb von OXOMI aktualisiert werden, ohne dass der Aufruf (z.B. in einem Link) angepasst werden müsste. Es wird jeweils das neueste Video mit dem gegebenen Code verwendet.

Rufen Sie die Funktion oxomi.openVideo auf, um das gewünschte Video in einem Overlay zu öffnen.

Parameter	Beschreibung
video	Gibt die ID oder den Code des Videos an, welches geöffnet werden soll. Existieren mehrere Videos mit dem gegebenen Code, wird das aktuellste geöffnet.
startTime	Zeit in Sekunden, an welcher Stelle das Video geöffnet werden soll.
paused	Belegen Sie diesen Parameter mit `true`, damit das Video pausiert geöffnet wird.

Beispiel:

oxomi.openVideo({ video: '0815' });

Zurück zur Übersicht