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önnnen 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
Produktvideo product
Anwendungsvideo usage
Schulungsvideo training
Imagevideo image
WebTV webtv

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.

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).

itemNumber

Gibt die Artikelnummer an, für die Seiten gesucht werden sollen.

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' });