INHALTSVERZEICHNIS
- A. Was macht das Plugin?
- B. Welchen Vorteil bringt mir das?
- 1. Voraussetzungen:
- 2. Hinweise:
- 3. Unterstützte Anbieter (Bsp. Funktionsattribut)
- 4. Einbinden über Funktionsattribute in der JTL-WaWi
- 5. Einbinden über das Plugin im Shop
- 6. Einstellungen im Plugin
- 7. VideoWall
A. Was macht das Plugin?
Mithilfe dieses Plugins können verschiedene Arten von Videos (youtube, vimeo, HTML5) beim Produkt oder sonst wo im Shop ganz einfach eingebunden werden.
Zudem hast du die Möglichkeit alle Videos auch in einer "VideoWall", also einer eigenen Seite mit allen Videos zu präsentieren.
Die Pflege der Videos geht ganz einfach in der JTL Wawi oder im JTL Shop.
B. Welchen Vorteil bringt mir das?
- Wertvoller Content für deine Besucher
- Schont die Ressourcen deines Servers, Videos sind ausgelagert
- Videos können sofort im Shop abgespielt werden
1. Voraussetzungen:
Für das Laden der Vimeo-Vorschaubilder für die PHP-Funktion file_get_contents verwendet. Diese Funktion setzt voraus, dass in der PHP Laufzeit-Konfiguration allow_url_fopen aktiviert ist.
2. Hinweise:
- Falls Autoplay aktiviert ist und die Videos im Tab-Menü angezeigt werden, fangen diese bei Seitenaufruf bereits an zu spielen obwohl sie noch nicht eingeblendet sind
- Autoplay von HTML-Videos funktioniert auf Kategorieseiten aufgrund von Beschränkungen des HTML5-Videoplayers nicht
- Sind mehrere Videos auf einer Seite hinterlegt und ist Autoplay aktiv starten alle Videos gleichzeitig
3. Unterstützte Anbieter (Bsp. Funktionsattribut)
Folgende Video Dienste werden derzeit unterstützt. In Klammern das Funktionsattribut, welches du beim Artikel hinterlegen musst.
4. Einbinden über Funktionsattribute in der JTL-WaWi
Dieser Punkt beschreibt, wie du Artikel in der JTL-WaWi konfigurierst die ein oder mehrere Videos enthalten sollen. Dieser Weg ist insbesondere für Massenverarbeitung sinnvoll (z.B. Import per Ameise), also wenn du viele Artikel mit Videos ausstatten möchtest.
Du findest die Attributverwaltung in der WaWi unter dem Punkt "Artikel". Dort klappt der Punkt "Attribute" auf. Nach dem Öffnen dieses Punkts, gelangst du in die Attributverwaltung.
Für Videos, die in Kategorien eingebunden werden sollen, wird stattdessen die Attributverwaltung für die jeweilige Kategorie genutzt.
Der Aufbau des Funktionsattributs bleibt dabei gleich.
Unter "Attribut anlegen" (weitere Infos dazu bei JTL) legts du nun ein "Funktionsattribut" an.
Anschließend kannst du dem Artikel in der JTL WaWi die entsprechenden Funktionsattribute (z.B. unter Eigene Attribute) zuweisen. Die Struktur des Funktionsattributs ist folgende:
- ws5video_anbieter_sort
Hinweise:
- anbieter ersetzt du durch "youtube", "vimeo" oder "html", je nachdem wo das einzubindende Video liegt.
- Für sort gib eine Zahl als Sortier-Kennzeichen an (z.B. 01, 02, 03, 04, 05, 06).
Achtung: Der Wert des Attributs darf bei Youtube- und Vimeo-Videos nur den Videocode (alles nach dem Slash) des Anbieters enthalten. Nicht die URL des Videos
Beispiel Konfiguration eines Artikel:
Bei HTML-Videos musst du den Pfad zum Video angeben.
Empfehlenswert ist hier auch, dass du pro Video mehrere Dateiformate (MP4, WebM oder OGG) zur Verfügung stellst, damit auch der Großteil der Browser unterstützt wird.
Um mehrere Formate anzugeben, verwende das Attribut mit dem Namen
- ws5video_html_sort
mehrmals, nur mit anderen Werten (Pfade) für die Formate MP4, WebM und OGG. Sort steht dabei für eine Zahl
5. Einbinden über das Plugin im Shop
Alternativ kannst du auch im Shop Backend Produkte mit Videos ausstatten, z. B. wenn du nur wenige Artikel auf diese Weise anreichern möchtest.
Im Reiter "Videos" hast du eine Übersicht aller über das Plugin zugeordneten Videos. Per Drag and Drop kannst du die Einträge sortieren.
Über den Button "Hinzufügen" kannst du einem Artikel ein Video zuweisen. Folgende Felder sind in der Bearbeitungsmaske vorhanden:
| Name | Beschreibung | Werte |
|---|---|---|
| Artikel | Welchem Artikel soll das Video zugewiesen werden. Es kann nach der Artikelnummer bzw. dem Artikelnamen gesucht werden | Artikelname, Artikelnummer |
| Kategorie | Welcher Kategorie soll das Video zugewiesen werden. Es kann nach der Kategorienummer bzw. dem Kategorienamen gesucht werden | Kategorienummer, Kategoriename |
| Typ | Lege hier den Anbieter fest | Youtube / Vimeo / HTML |
| Code | Dieses Feld wird nur angezeigt, wenn als Typ "Youtube" oder "Vimeo" gewählt wurden. Hier fügsr Du den oben beschriebenen Videocode (siehe Funktionsattribte") ein | z.B. "6DbnI-1m7r8" |
| Pfad MP4 / WebM / OGG | Diese drei Felder werden eingeblendet, wenn als Typ "HTML" gewählt wurde. Hier gibst Du die Pfade zu den jeweiligen Formaten ein. | Pfade zu den Formaten |
| Titel | Lege einen Titel für das Video fest. (optional - wird nur angezeigt wenn in Einstellungen so festgelegt) | Text |
| Beschreibung | Lege eine Text für das Video fest, der unterhalb des Videos erscheint. (optional - wird nur angezeigt wenn in Einstellungen so festgelegt) | Text |
6. Einstellungen im Plugin
Im Reiter "Einstellungen" findest du folgende Möglichkeiten. Diese sind für bessere Übersicht mit Beschriftungen unterteilt:
6.1 Einstellungen Artikel Videos
| Option | Beschreibung | Werte |
|---|---|---|
| Quelle | Lege fest, ob die Videos aus den Funktionsattributen, aus dem Plugin oder aus beiden Quellen angezeigt werden sollen | Plugin / Funktsattribut / Beides |
| Autoplay Videos | Lege fest, ob die Video beim Öffnen der Seite/der Lightbox direkt abgespielt werden sollen. | Ja/Nein |
| Nur Vaterartikel anzeigen | Lege fest, ob im Adminbereich bei der Auswahl von Artikeln keine Kindartikel angezeigt werden sollen. | Ja / Nein |
| Videos vererben | Lege fest, ob die Videos von Vaterartikeln auch bei den Kindartikeln angezeigt werden sollen. | Ja/Nein |
| YouTube Videos loopen | Lege fest, ob YouTube Videos am Ende neu starten | Ja/Nein |
6.1.1 Videos mehreren Artikeln/Kategorien zuordnen
Um ein Video mehreren Artikeln zuzuordnen bei der Auswahl der Artikel einfach die gewünschten Artikel anklicken. Sind die Videos jedoch einmal angelegt müssen sie einzeln gepflegt werden. Gleiches gilt für Kategorien.
6.1.2 Vererbung von Videos
Ist die Einstellung zur Vererbung von Videos gesetzt, werden die Videos auch bei den Kindartikeln angezeigt. Es können auch zusätzlich bei den Kindern Videos angelegt werden.
6.1.3 Videos nur Artikeln / nur Kategorien zuordnen
Bei der Erstellung / Bearbeitung eines Videos muss entweder das Artikel-Feld oder das Kategoriefeld ausgefüllt sein, damit es auch gespeichert wird (Es können auch beide Felder ausgefüllt sein).
6.2 Ansicht
| Name | Beschreibung | Wert |
| Steuerung anzeigen | Lege fest ob die Steuerungsoptionen in einem Youtube Video angezeigt werden sollen | Ja / Nein |
| Titel anzeigen | Legt fest, ob die Videotitel aus dem Backend auch angezeigt werden | Ja / Nein |
| Beschreibung anzeigen | Lege fest, ob die Beschreibungen der Videos angezeigt werden sollen. | Ja / Nein |
| Verwandte Videos anzeigen | Lege fest ob am Ende eines Videos ähnliche Videos abgespielt werden sollen, oder Videos die von YouTube dem Nutzer vorgeschlagen werden | Verwandte / Vorschläge |
| Video direkt einbinden | Lege fest, ob Thumbnails angezeigt werden sollen, das Video öffnet sich dann in einer Lightbox. Oder soll der Videoplayer direkt eingebunden werden? | Ja / Nein |
| Art der Darstellung | Lege fest, ob das Video im Tabmenü dargestellt werden soll, bei einem ausgewähltem Selektor, im Bilderslider der Artikelseite oder in einem seperaten Videoslider auf der Artikelseite. | Eigener Selektor / Im Tab Menü / Im Artikelslider/ Im Videoslider |
Die Anzeige der Videos auf der Artikeldetailseite erfolgt über die "videos_direkt.tpl", wenn die Einstellung "Videos direkt einbinden ausgewählt ist. Ansonsten über die "videos.tpl".
Beide Dateien liegen im folgenden Verzeichnis
- ws5_videoconnect/frontend/template/
Das Styling der Artikelvideos erfolgt über die:
- ws5_videoconnect/frontend/css/ws5_videoConnect.css
Um Deine Artikelvideos an das Aussehen deines Shops anzupassen, können die eben genannten Dateien individualisiert werden.
Bitte kopiere dazu die vorhandene Datei und ergänze den Dateinamen mit "_custom" also z.B. videos_direkt_custom.tpl oder ws5_videoConnect_custom.css. Sind diese Dateien vorhanden, werden die "_custom" Dateien, statt der normalen geladen.
Falls du keine Kopie verwendest wird diese bei einem Plugin-Update überschrieben.
Hinweis: Aus Urheberrechtsgründen ist es nicht möglich, YouTube- oder Vimeo-Videos ohne Videotitel / Link / Kanal / ... einzubinden
6.3 Selektoren/ Positionierung
Siehe: Selektoren im Plugin Video Connect (Positionierung)
6.4 Einstellungen Videos
| Option | Beschreibung | Werte |
|---|---|---|
| Lighbox Breite (in Pixeln) | Größe der Lightbox (in px) | 640 |
| Lighbox Höhe (in Pixeln) | 385 | |
| Artikelslider Bild Breite | Größe der Videos im Artikelslider | auto |
| Artikelslider Bild Höhe | auto |
Hier lassen sich die Größe der Lightbox und die Größe der Videos im Artikelbildslider einstellen.
Die Größe der Lightbox wird in Pixeln angegeben, die der Videos im Artikelbildslider können alle gültigen CSS-Werte sein (pixel, prozent, auto, ...).
Die Größe für den Artikelbildslider betrifft nicht die Thumbnail-Vorschau der Videos, sondern die tatsächlichen Videos selbst wenn diese wie ein Artikelbild eingeblendet werden.
7. VideoWall
Eine Video Wall ist eine Eigene Seite, auf der du, wie in einer Bildergalerie, Videos auflisten und anzeigen kannst.
Du kannst dort auch alle Videos aus deinem Channel automatisch ausgeben lassen, dazu benötigts du nur einen Youtube API Key.
Wie du den erstellst, ist hier gut beschrieben: https://support.vimp.com/de/faq/items/youtube-api-key-erstellen.html
7.1 Erstellen einer VideoWall
Wechsle in den Reiter "VideoWalls". Der Button "Neue VideoWall" leitet dich zum Erstellen einer neuen CMS-Seite weiter.
Hier trage bitte den gewünschten Namen ein und wähle "Seite mit eigenem xHTML-Inhalt".
Die folgenden Angaben können nach Wunsch gewählt werden. Wenn alles nach Wunsch eingetragen und gestaltet ist speichere die Seite mit "Seite speichern" und navigiere wieder zum Plugin Video Connect in den Reiter VideoWalls.
Das Aussehen der angelegten VideoWalls kann jederzeit im Menü unter "Inhalt->CMS(Eigene Seiten)" unter der Linkgruppe "WS5VideoWalls" bearbeitet werden.
Nach dem Anlegen der CSM-Seite erwartet dich folgendes Bild:
Die angelegte VideoWall wird angezeigt und kann nun mit einem Klick auf den Namen sofort in einem neuen Tab betrachtet werden.
Mit Klick auf das "bearbeiten" Symbol kann die VideoWall konfiguriert werden.
7.2 VideoWall konfigurieren
7.2.1 Gruppen erstellen
In einer VideoWall können Videos in Gruppen organisiert werden. Mit dem Button "Gruppe hinzufügen" kann eine neue Gruppe zur VideoWall hinzugefügt werden.
Vergebe hier einen Namen für deine Gruppe und drücke den Button "Gruppe erstellen" um die Gruppe und die VideoWall anzuhängen.
7.2.2 Einzelne Videos konfigurieren
Um einer VideoWall Videos zuzuordnen muss erst eine Gruppe erstellt werden. Ist dies erledigt können Videos angefügt werden.
Mit dem Button "Video hinzufügen" unterhalb der gewünschten Gruppe kann ein neues Video an die Gruppe angehängt werden, betätigt man diesen Knopf so öffnet sich folgender Dialog.
Hier kannst du die Daten des Videos eintragen. Beim Feld "Code" bitte nur den Code des Videos eintragen, nicht den Link zum Video.
Mit "Speichern" wird das Video gespeichert.
Ist ein Video angelegt, so können mit
jederzeit die Konfiguration des Videos bearbeitet werden. Mit 
wird die Konfiguration des Videos gelöscht.
7.3 Konfiguration der VideoWall
Im Reiter "Einstellungen" gibt es einen eigenen Bereich für die Einstellungen der VideoWall.
| Daten von Video aus Videoplattform laden | JA: es werden die Daten der Videos von den angegebenen VideoPlattformen geladen. Bei Youtube-Videos ist die Angabe einer "YouTube AppID" im Plugin nötig. NEIN: Es werden die zu den Videos gespeicherten Daten angezeigt. | JA / NEIN |
| YouTube AppID | Die Angabe ist nötig falls "Daten von Video aus Videoplattform laden" mit "JA" gewählt ist und es YouTube Videos dargestellt werden sollen. So bekommst du den API KEy: https://support.vimp.com/de/faq/items/youtube-api-key-erstellen.html | |
| Anzeige | Hier stellst Du ein wie die Videos angezeigt und abgespielt werden. Mit "Thumbnail" wird ein Bild von der Videoplattform geladen und angezeigt, bei Klick wird ein neuer Tab im Browser geöffnet in dem das Vieo abgespielt wird. Mit "Video" wird das Video direkt in der VideoWall geladen, bei Klick wird es direkt abgespielt. Mit "Lightbox" wird ebenfalls ein Thumbnail angezeigt und bei Klick wird dieses in einer Lightbox geöffnet und kann abgespielt werden. | Thumbnail / Video / Lighbox |
| Infobox | Zu jedem Video wird eine Infobox mit Infos wie Uploaddatum und Uploader angezeigt | Ja / Nein |
| Sichtbare Videos | Hier kann die Anzahl der für jede Gruppe sichbaren Videos eingestellt werden. Ist die Anzahl der Videos in einer Gruppe größer als die eingestelle Zahl, so werden diese ausgeblendet und können mit einem Klick auf den Button "Weitere Videos anzeigen" eingeblendet werden. | z.B. 6 |
Selektoren und Größeneinstellungen finden sich unter den jeweiligen Menüpunkten wie in 6.3 und 6.4 beschrieben.
7.4 Individuelle Gestaltung der VideoWall
Um deine VideoWall an das Aussehen deines Shops anzupassen können folgende Dateien individualisiert werden:
- ws5_videoconnect/frontend/css/ws5_VideoWall.css
- ws5_videoconnect/frontend/template/videoWallVideo.tpl
Bitte kopiere dazu die vorhandene Datei und ergänze den Dateinamen mit "_custom" also z.B. videoWallVideo_custom.tpl
Wenn du keine Kopie verwendest wird diese bei einem Plugin-Update überschrieben.
Tags: