Allgemeines
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, finden Sie am Ende jedes Kapitels entsprechenden Code zum Testen.
Die Integration oxomi.videos rendert eine Liste von Videos in den angegebenen DOM-Container. Dabei wird das Vorschau-Bild des Videos sowie dessen Name angezeigt. Die Integration bietet verschiedene Filter-, Sortier- und Gruppiermöglichkeiten, mit denen Sie die Ergebnisse einschränken und anpassen können. Darüber hinaus kann ein Gruppenfilter angezeigt werden.
Die gerenderte Liste von Videos enthält bis zu 50 Einträge. Falls mehr Videos gefunden wurden, so wird eine Karte mit dem Label „Weitere anzeigen“ dargestellt. Durch einen Klick auf diese Karte werden jedes Mal bis zu 15 weitere Videos nachgeladen.
Die Integration bietet verschiedene CSS -cust Klassen an, um das Aussehen oder den Funktionsumfang der Integration zu beeinflussen. Weitere Informationen hierzu finden Sie im Artikel Individuelle CSS Regeln.
Der Aufruf der Integration liefert ein Promise zurück, welches Ihnen die Möglichkeit gibt, entsprechend auf den Abschluss des Aufrufs zu reagieren. Hierfür können Sie die then und catch Methoden des Promise Objekts verwenden. Der nachfolgende JavaScript-Code zeigt ein Beispiel, wie Sie auf den Abschluss des Aufrufs reagieren können.
oxomi.videos({
target: '#output',
showActions: true,
showGroupFilter: true,
groupBy: "brand",
supplierNumbers: 'L10190'
}).then((result) => {
console.log("success");
}).catch((error) => {
console.log("failed");
}); Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter der Integration.
| Parameter | Parametertyp | Beschreibung | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| target | string |
Gibt das Ziel-Element an, in welches die gerenderte Liste von Videos eingefügt wird. Hinweis:
|
||||||||||||
| supplierNumbers | string |
Gibt die Lieferantennummern der Partner an, auf welche die Ergebnisse eingeschränkt werden sollen. Hinweis:
|
||||||||||||
| excludedSupplierNumbers | string |
Gibt die Lieferantennummern der Partner an, deren Inhalte von den Ergebnissen ausgeschlossen werden sollen. Hinweis:
|
||||||||||||
| brandIds | string |
Gibt die IDs der Marken an, auf welche die Ergebnisse eingeschränkt werden sollen. Hinweis:
|
||||||||||||
| seriesIds | string |
Gibt die IDs der Serien an, auf welche die Ergebnisse eingeschränkt werden sollen. Hinweis:
|
||||||||||||
| tags | string |
Gibt die Tags an, auf welche die Ergebnisse eingeschränkt werden sollen. Hinweis:
|
||||||||||||
| categoryIds | string |
Gibt die IDs der Kategorien an, auf welche die Ergebnisse eingeschränkt werden sollen. Hinweis:
|
||||||||||||
| types | string |
Gibt die Video-Typen an, auf welche die Ergebnisse eingeschränkt werden sollen. Die verfügbaren Werte können hier eingesehen werden: Videotypen Hinweis:
|
||||||||||||
| filterLanguages | string |
Gibt die Sprachen als 2-buchstabige ISO-Codes an, auf welche die Ergebnisse eingeschränkt werden sollen. Die verfügbaren Werte können hier eingesehen werden: ISO-Sprachcodes Hinweis:
|
||||||||||||
| filterCountries | string |
Gibt die Länder als 2-buchstabige ISO-Codes an, auf welche die Ergebnisse eingeschränkt werden sollen. Die verfügbaren Werte können hier eingesehen werden: ISO-Ländercodes Hinweis:
|
||||||||||||
| own | boolean |
Gibt an, ob nur eigene Videos oder nur Videos von anderen Anbietern angezeigt werden sollen. Hinweis:
|
||||||||||||
| includeOutdated | boolean |
Gibt an, ob auch archivierte Videos in den Ergebnissen angezeigt werden sollen. Hinweis:
|
||||||||||||
| onlyOutdated | boolean |
Gibt an, ob ausschließlich archivierte Videos in den Ergebnissen angezeigt werden sollen. Hinweis:
|
||||||||||||
| sortBy | string |
Gibt die Sortierung der Ergebnisse vor. Die nachfolgenden Werte stehen hier zur Verfügung:
Hinweis:
|
||||||||||||
| showGroupFilter | boolean |
Gibt an, ob ein Gruppenfilter angezeigt werden soll. Wird dieser Parameter auf true gesetzt, werden über dem Ergebnis Schaltflächen zur Filterung durch den Nutzer auf einzelne Gruppen angezeigt. Hinweis:
|
||||||||||||
| groupBy | string |
Gibt an ob und wie das Ergebnis gruppiert werden soll. Die nachfolgenden Werte stehen hier zur Verfügung:
Hinweis:
|
||||||||||||
| limit | integer |
Gibt die maximale Anzahl an Videos an, welche initial angezeigt werden sollen. Hinweis:
|
Allgemeine Parameter
Aufruf Parameter
Ausgabebereich
Die Integration oxomi.embedVideo rendert entweder das Cover-Bild eines einzelnen angegebenen Videos (sowie dessen Name) oder das Video direkt in den angegebenen DOM-Container. Für die direkte Einbettung des Videos stehen zwei verschiedene Arten zur Verfügung, welche mithilfe des mode Parameters festgelegt werden können.
Die Integration bietet zudem verschiedene CSS -cust Klassen an um das Aussehen oder den Funktionsumfang der Integration zu beeinflussen. Weitere Informationen hierzu finden Sie im Artikel Individuelle CSS Regeln.
Der Aufruf der Integration liefert ein Promise zurück, welches Ihnen die Möglichkeit gibt, entsprechend auf den Abschluss des Aufrufs zu reagieren. Hierfür können Sie die then und catch Methoden des Promise Objekts verwenden. Der nachfolgende JavaScript-Code zeigt ein Beispiel, wie Sie auf den Abschluss des Aufrufs reagieren können.
oxomi.embedVideo({
target: "#output",
video: "131",
mode: "overlay",
autoplay: true,
showName: true
}).then((result) => {
console.log("success");
}).catch((error) => {
console.log("failed");
}); Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter der Integration.
| Parameter | Parametertyp | Beschreibung | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| video | string |
Gibt die ID oder den Code des Videos an. Hinweis:
|
||||||||
| target | string |
Gibt das Ziel-Element an, in welches das gerenderte Video eingefügt wird. Hinweis:
|
||||||||
| mode | string |
Gibt den Modus der Einbettung an. Die nachfolgenden Werte stehen hier zur Verfügung:
Hinweis:
|
||||||||
| autoplay | boolean |
Gibt an, ob das Video nach dem Laden sofort abgespielt werden soll. Hinweis:
|
||||||||
| showName | boolean |
Gibt an, ob der Name des Videos angezeigt werden soll. Hinweis:
|
Allgemeine Parameter
Aufruf Parameter
Ausgabebereich
Mit der Integration oxomi.openVideo kann ein Video in einem Overlay geöffnet werden. So können Sie beispielsweise ein Video aus einer Videoliste oder aus einem anderen Kontext heraus anzeigen.
Der Aufruf der Integration liefert ein Promise zurück, welches Ihnen die Möglichkeit gibt, entsprechend auf den Abschluss des Aufrufs zu reagieren. Hierfür können Sie die then und catch Methoden des Promise Objekts verwenden. Der nachfolgende JavaScript-Code zeigt ein Beispiel, wie Sie auf den Abschluss des Aufrufs reagieren können.
oxomi.openVideo({
video: '131',
startTime: 3.0,
autoplay: false
}).then((result) => {
console.log("success");
}).catch((error) => {
console.log("failed");
}); Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter der Integration.
| Parameter | Parametertyp | Beschreibung |
|---|---|---|
| video | string |
Gibt die ID oder den Code des Videos an. Hinweis:
|
| startTime | number |
Gibt die Zeit in Sekunden an, an welcher Stelle das Video geöffnet werden soll. |
| autoplay | boolean |
Gibt an, ob das Video nach dem Laden sofort abgespielt werden soll. Hinweis:
|
Die Integration oxomi.videoPlaylist rendert einen Video-Player direkt in das angegebene Ziel-Element. Der Player zeigt eine Playlist von Videos an, welche automatisch abgespielt werden.
Der Aufruf der Integration liefert ein Promise zurück, welches Ihnen die Möglichkeit gibt, entsprechend auf den Abschluss des Aufrufs zu reagieren. Hierfür können Sie die then und catch Methoden des Promise Objekts verwenden. Der nachfolgende JavaScript-Code zeigt ein Beispiel, wie Sie auf den Abschluss des Aufrufs reagieren können.
oxomi.videoPlaylist({
target: "#output",
videos: "131,133,142"
}).then((result) => {
console.log("success");
}).catch((error) => {
console.log("failed");
}); Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter der Integration.
| Parameter | Parametertyp | Beschreibung |
|---|---|---|
| videos | string |
Gibt die ID oder den Code der Videos an, welche in der Playlist angezeigt werden sollen. Hinweis:
|
| target | string |
Gibt das Ziel-Element an, in welches die gerenderte Video-Playlist eingefügt wird. Hinweis:
|