Dokumentation Video Connect

Geändert am Fr, 26 Mai, 2023 um 3:13 NACHMITTAGS


INHALTSVERZEICHNIS


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.

  • YouTube (ws5video_youtube_01
  • Vimeo (ws5video_vimeo_01
  • HTML (ws5video_html_01


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.


Funktionsattribut anlegen

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


youtube code

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:


NameBeschreibungWerte
ArtikelWelchem Artikel soll das Video zugewiesen werden. Es kann nach der Artikelnummer bzw. dem Artikelnamen gesucht werdenArtikelname, Artikelnummer
KategorieWelcher Kategorie soll das Video zugewiesen werden. Es kann nach der Kategorienummer bzw. dem Kategorienamen gesucht werdenKategorienummer,
Kategoriename
TypLege hier den Anbieter festYoutube / Vimeo / HTML
CodeDieses Feld wird nur angezeigt, wenn als Typ "Youtube" oder "Vimeo" gewählt wurden. Hier fügsr Du den oben beschriebenen Videocode (siehe Funktionsattribte") einz.B. "6DbnI-1m7r8"
Pfad MP4 / WebM / OGGDiese 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
TitelLege einen Titel für das Video fest. (optional - wird nur angezeigt wenn in Einstellungen so festgelegt)Text
BeschreibungLege 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


OptionBeschreibungWerte
QuelleLege fest, ob die Videos aus den Funktionsattributen, aus dem Plugin oder aus beiden Quellen angezeigt werden sollenPlugin / Funktsattribut / Beides
Autoplay VideosLege fest, ob die Video beim Öffnen der Seite/der Lightbox direkt abgespielt werden sollen.Ja/Nein
Nur Vaterartikel anzeigenLege fest, ob im Adminbereich bei der Auswahl von Artikeln keine Kindartikel angezeigt werden sollen.Ja / Nein
Videos vererbenLege fest, ob die Videos von Vaterartikeln auch bei den Kindartikeln angezeigt werden sollen.Ja/Nein
YouTube Videos loopenLege fest, ob YouTube Videos am Ende neu startenJa/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


NameBeschreibungWert
Steuerung anzeigenLege fest ob die Steuerungsoptionen in einem Youtube Video angezeigt werden sollenJa / Nein
Titel anzeigenLegt fest, ob die Videotitel aus dem Backend auch angezeigt werdenJa / Nein
Beschreibung anzeigenLege fest, ob die Beschreibungen der Videos angezeigt werden sollen.Ja / Nein
Verwandte Videos anzeigenLege fest ob am Ende eines Videos ähnliche Videos abgespielt werden sollen, oder Videos die von YouTube dem Nutzer vorgeschlagen werdenVerwandte / Vorschläge
Video direkt einbindenLege 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 DarstellungLege 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


OptionBeschreibungWerte
Lighbox Breite (in Pixeln)Größe der Lightbox (in px)640
Lighbox Höhe (in Pixeln)385
Artikelslider Bild BreiteGröße der Videos im Artikelsliderauto
Artikelslider Bild Höheauto

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.

Konfiguration
Daten von Video aus Videoplattform ladenJA: 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 AppIDDie 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
AnzeigeHier 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
InfoboxZu jedem Video wird eine Infobox mit Infos wie Uploaddatum und Uploader angezeigtJa / Nein
Sichtbare VideosHier 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: