Sie sehen sich Hilfeinhalte der folgenden Version an:

Sie können interaktive Videos einfach erstellen, die direkt im Video den Abschluss unterstützen. Die Kundenbeteiligung mit dem Video erfolgt in einem Feld neben dem Videoplayer, in dem die zugehörigen Services, Informationen oder Produktminiaturen auf Grundlage des Umfangs im Video per Bildlauf in die Ansicht einfließen. Kunden können auf die Miniatur tippen und werden direkt mit dem Service verbunden. Alternativ können sie den Artikel für den direkten Erwerb zu einem Warenkorb hinzufügen oder sie werden mit einer Webseite verbunden, um weitere Informationen zu erhalten.

Wenn das Video beendet wird, wird eine visuelle Zusammenfassung sämtlicher Angebote angezeigt, um den Aktionsaufruf zu unterstützen. Kunden haben eine weitere Möglichkeit, auf den gewünschten Artikel zu tippen. Durch umsetzbare und spezifische Erlebnisse wie diese werden die Kundenbeteiligung und der Abschluss erhöht.

Informationen hierzu finden Sie auch im Thema über Interaktive Bilder.

Interaktives Video in Aktion

Klicken Sie auf den folgenden Screenshot, um das vollständige interaktive Video anzusehen.

Wenn während der Wiedergabe Produkte im Video verwendet werden, wird das identische Produkt auf der rechten Seite als Miniaturansicht angezeigt.

Klicken Sie auf die Miniaturansicht, um das Video anzuhalten und die Schnellansicht des Produkts zu öffnen. Sie können beispielsweise auf die KitchenAid-Miniaturansicht klicken, um eine 360-Grad-Rotationsansicht des Mixers anzuzeigen, oder heranzoomen, um die Details des Mixers zu sehen.

chlimage_1

Hinweis:

Bei interaktiven Videos, die eine Webseite aufrufen, sobald ein Benutzer auf eine Miniaturansicht klickt, wird die Anzeige der Popup-Webseite auf einigen Geräten blockiert. In diesen Fällen müssen Sie die Popup-Blocker-Einstellung auf dem Gerät ändern. Auf einem Apple iPhone 6 tippen Sie beispielsweise auf Einstellungen > Safari > Popups blockieren und schieben Sie das Steuerelement auf Aus. Wenn Sie ein interaktives Video wiedergeben und auf eine Miniaturansicht klicken, werden Sie gefragt, ob das Popup geöffnet werden soll. Wenn Sie dies akzeptieren, wird die Webseite geöffnet.

Erstellen von interaktiven Videos

Hier erhalten Sie eine Einführung (7 Min., 30 Sek.) in die Erstellung interaktiver Videos.
(Obwohl die Videoeinführung mit Assets on Demand erstellt wurde, gelten die Prinzipien und Schritte auch für interaktive Videos in AEM Assets.)

Kundenerfolgs-Webinar von Adobe

Im Webinar „Using Interactive Video, Link Sharing, and YouTube sharing in AEM Assets“ (Verwenden von interaktiven Videos, Link- und YouTube-Freigabe in AEM Assets) erfahren Sie, wie mit interaktiven Videos und anderen Funktionen konvertierungsgesteuerte Ereignisse in Videomarketinginhalte eingebunden werden.

Schnellstart: interaktive Videos

Die folgende schrittweise Workflow-Beschreibung soll Ihnen dabei helfen, um interaktive Videos mit Shopping-Funktion in dynamischen Medien einzurichten und schnell auszuführen.

Achten Sie auf die Überschrift „Beispiel“ in einigen der Schnellstartaufgaben. Hier finden Sie eine kurze Übung, die auf folgender Demowebseite basiert:

https://marketing.adobe.com/resources/help/de_DE/dm/shoppable-video/john-lewis/landing-0.html

Die Beispiele veranschaulichen die Schritte zur Integration interaktiver Videos auf Ihrer Website.

Schritte zum Erstellen interaktiver Videos:

  1. (Optional) Ermitteln von Schnellansichtsvariablen: Ermitteln Sie zunächst die dynamischen Variablen, die von der vorhandenen Schnellansichtsimplementierung verwendet werden. Mit den Variablen ordnen Sie Produktminiaturansichten der entsprechenden Produktschnellansicht zu, wenn Sie ein interaktives Video erstellen.
    Informationen finden Sie im Thema (Optional) Ermitteln von Schnellansichtsvariablen.
    Beachten Sie, dass dieser Schritt nur erforderlich ist, wenn Folgendes zutrifft:
    – Sie möchten das Video durch Auslösen von Schnellansichten in ein interaktives Video umwandeln.
    – Ihre AEM-Implementierung verwendet kein eCommerce-Integrations-Framework, um Produktdaten aus einer eCommerce-Lösung wie IBM Websphere Commerce, Elastic Path, hybris oder Intershop in AEM abzurufen.
    Siehe eCommerce-Konzepte in AEM Assets.
  2. (Optional) Erstellen einer Viewer-Vorgabe für ein interaktives Video: Passen Sie das Aussehen und Verhalten verschiedener Komponenten im Player an, beispielsweise den Video-Scrubber und die interaktiven Miniaturansichten.
    Die Erstellung einer eigenen Viewer-Vorgabe für ein interaktives Video ist nicht erforderlich, wenn Sie stattdessen die standardmäßig bereitgestellten Viewer-Vorgaben für interaktive Videos namens Shoppable_Video_Light oder Shoppable_Video_Dark verwenden möchten.
    Siehe (Optional) Erstellen einer neuen Viewer-Vorgabe und Besondere Überlegungen bei der Erstellung einer Viewer-Vorgabe für ein interaktives Video.
  3. Hochladen eines Videos und der zugehörigen Miniatur-Assets: Laden Sie ein Video und die zugehörigen Bilder hoch, die interaktiv sein sollen.
    Informationen hierzu finden Sie im Thema über das Hochladen eines Videos und der zugehörigen Miniatur-Assets.
  4. Hinzufügen von Interaktivität zum Video: Fügen Sie dem Video mindestens ein Zeitsegment hinzu. Verknüpfen Sie dann Miniaturansichten mit diesen Zeitsegmenten. Weisen Sie jeder Miniaturansicht eine Aktion wie einen Hyperlink oder eine Schnellansicht zu. (Beachten Sie, dass die URL-basierte Verlinkungsmethode nicht möglich ist, wenn Ihr interaktiver Inhalt über Links mit relativen URLs verfügt, insbesondere über Links zu Seiten in AEM Sites.)
    Schließen Sie den Vorgang ab, indem Sie die interaktiven Video-Assets veröffentlichen. Durch das Veröffentlichen wird der Integrationscode oder die URL erstellt, die Sie schließlich kopieren und auf die Einstiegsseite für Ihre Website anwenden.
    Informationen hierzu finden Sie unter Hinzufügen von Interaktivität zum Video.
    Siehe Veröffentlichen von Assets.
  5. Hinzufügen eines interaktiven Videos zu Ihrer Website oder zu Ihrer Website in AEM
    Wenn Sie AEM Sites, AEM eCommerce oder beides verwenden, können Sie das interaktive Video direkt auf einer Webseite in AEM hinzufügen, indem Sie die interaktive Medienkomponente auf die Seite ziehen. Siehe Hinzufügen von Assets mit dynamischen Medien zu Seiten.
    Verwenden Sie den Einbettungscode, um das interaktive Video auf Ihrer Website zu integrieren. Siehe Integrieren eines interaktiven Videos auf Ihrer Website.
    Wenn Sie einen Drittanbieter-WCM (Web Content Manager) verwenden, müssen Sie das neue interaktive Video in die vorhandene Schnellansichtsimplementierung integrieren, die auf Ihrer Website verwendet wird. Siehe Integrieren eines interaktiven Videos mit einer vorhandenen Schnellansicht.

(Optional) Ermitteln von Schnellansichtsvariablen

Hinweis:

Diese Aufgabe ist nur erforderlich, wenn Folgendes zutrifft:

  • Sie möchten das Video durch Auslösen von Schnellansichten in ein interaktives Video umwandeln.
  • Ihre AEM-Implementierung verwendet kein eCommerce-Integrations-Framework, um Produktdaten aus einer eCommerce-Lösung wie IBM Websphere Commerce, Elastic Path, hybris oder Intershop in AEM abzurufen. Siehe eCommerce-Konzepte in AEM Assets.

Wenn Ihre AEM-Implementierung eCommerce verwendet, können Sie diese Aufgabe überspringen und zur nächsten Aufgabe übergehen.

Ermitteln Sie zunächst die durch Ihre vorhandene Schnellansichtsimplementierung verwendeten dynamische Variablen, damit Sie die Produktminiaturen während des Erstellungsvorgangs des interaktiven Videos der entsprechenden Produktschnellansicht zuordnen können.

Beim Hinzufügen von Zeitsegmenten zu einem Video weisen Sie jeder Miniatur, die Sie zu einem Segment hinzufügen, eine SKU und zusätzliche Variablen hinzu. Solche Variablen werden später verwendet, um das richtige Schnellansichtsprodukt anzuzeigen.

Es ist wichtig, entsprechend zu ermitteln, welche Variablen erforderlich sind, um eine Produktschnellansicht eindeutig auszulösen.

Manchmal ist es ausreichend, die IT-Experten zu konsultieren, die für Ihre vorhandene Schnellansichtsimplementierung verantwortlich sind. Diese kennen wahrscheinlich den Mindestsatz an Daten, die erforderlich sind, um die Schnellansicht im System zu ermitteln. In den meisten Fällen ist es jedoch auch möglich, einfach das vorhandene Verhalten des Front-End-Codes zu analysieren.

Der Großteil der Schnellansichtsimplementierungen verwendet das folgende Modell:

  • Der Benutzer aktiviert ein Benutzeroberflächenelement auf der Website. Er klickt z. B. auf eine „Schnellansicht“-Schaltfläche.
  • Die Website sendet eine Ajax-Anforderung an das Back-End, um bei Bedarf die Schnellansichtsdaten oder -inhalte zu laden.
  • Die Schnellansichtsdaten werden in den Inhalt übersetzt, um für das Rendern auf der Webseite vorbereitet zu werden.
  • Schließlich zeigt der Front-End-Code diesen Inhalt visuell auf dem Bildschirm an.

Der Ansatz besteht daher darin, unterschiedliche Bereiche Ihrer vorhandenen Website aufzurufen, auf denen die Schnellansicht implementiert ist, die Schnellansicht auszulösen und die Ajax-URL zu erfassen, die durch die Webseite zum Laden der Schnellansichtsdaten oder -inhalte gesendet wurde.

Normalerweise müssen Sie keine speziellen Debugging-Tools verwenden. Moderne Webbrowser verfügen über Web-Inspektoren, die dafür ausreichend sind. Die folgenden Webbrowser beispielsweise umfassen Web-Inspektoren:

  • Um alle ausgehenden HTTP-Anforderungen in Google Chrome zu sehen, drücken Sie die Taste F12 zum Öffnen des Bereichs für Entwicklertools und klicken Sie dann auf die Registerkarte Netzwerk.
  • In Firefox können Sie entweder das Firebug-Plug-in durch Drücken von F12 aktivieren und dessen Registerkarte Netz verwenden oder das integrierte Inspektor-Tool und dessen Netzwerk-Registerkarte einsetzen.
  • In Internet Explorer aktivieren Sie das Debugger-Tool, indem Sie F12 drücken.

Wenn die Netzwerküberwachung im Browser aktiviert ist, lösen Sie die Schnellansicht auf der Seite aus.

Suchen Sie nun die Schnellansichts-Ajax-URL im Netzwerkprotokoll und kopieren Sie die aufgezeichnete URL für die zukünftige Analyse. In den meisten Fällen werden beim Auslösen der Schnellansicht zahlreiche Anforderungen an den Server gesendet. Normalerweise ist die Schnellansichts-Ajax-URL die erste in der Liste. Sie weist einen Teil oder Pfad mit einer komplexen Abfragezeichenfolge auf und ihr MIME-Typ lautet entweder text/html, text/xml oder text/javascript.

Während dieses Vorgangs ist es wichtig, dass Sie verschiedene Bereiche der Website mit unterschiedlichen Produktkategorien und -typen besuchen. Der Grund dafür ist, dass Schnellansichts-URLs möglicherweise Teile aufweisen, die für eine bestimmte Website-Kategorie gleich sind und sich nur ändern, wenn Sie einen anderen Bereich der Website besuchen.

Im einfachsten Fall ist der einzige variable Teil der Schnellansichts-URL die Produkt-SKU. In diesem Fall ist der Wert der Produkt-SKU der einzige Teil der Daten, der zum Hinzufügen von Miniaturansichten zu einem Zeitintervall im interaktiven Video in AEM benötigt wird.

In komplexen Fällen hat die Schnellansichts-URL allerdings mehrere verschiedene Elemente zusätzlich zur Produkt-SKU, wie Kategorie-ID, Farbcode usw. In solchen Fällen wird jedes dieser Elemente zu einer separaten Variablen bei der Definition der Daten für die Miniaturansicht in AEM.

Im Folgenden finden Sie einige Beispiele für Schnellansichts-URLs und die resultierenden Miniaturansichtsvariablen:

Einzelne SKU, die sich in der Abfragezeichenfolge befindet.

Die aufgezeichneten Schnellansichts-URLs umfassen Folgendes:

  • http://server/json?productId=866558&source=100

  • http://server/json?productId=1196184&source=100

  • http://server/json?productId=1081492&source=100

  • http://server/json?productId=1898294&source=100

Der einzige variable Teil der URL ist der Wert des Abfragezeichenfolgenparameters productId= und damit eindeutig ein SKU-Wert. Daher müssen für unsere Miniaturansichten nur SKU-Felder mit Werten wie den folgenden gefüllt werden: 866558, 1196184, 1081492, 1898294.

Einzelne SKU, gefunden im URL-Pfad.

Die aufgezeichneten Schnellansichts-URLs enthalten Folgendes:

  • http://server/product/6422350843

  • http://server/product/1607745002

  • http://server/product/0086724882

Der variable Teil ist der letzte Bereich des Pfades. Er wird zum SKU-Wert der AEM-Miniaturansichten: 6422350843, 1607745002, 0086724882.

SKU und Kategorie-ID in der Abfragezeichenfolge.

Die aufgezeichneten Schnellansichts-URLs umfassen Folgendes:

  • http://server/quickView/product/?category=1100004&prodId=305466

  • http://server/quickView/product/?category=1100004&prodId=310181

  • http://server/quickView/product/?category=1740148&prodId=308706

In diesem Fall gibt es zwei veränderliche Teile in der URL. Die SKU wird im Parameter prodId und die Kategorie-ID im Parameter category= gespeichert.

Bei den Definitionen für Miniaturansichten selbst handelt es sich um Paare, das heißt einen SKU-Wert und eine zusätzliche Variable mit der Bezeichnung categoryId. Die resultierenden Paare sind also:

  • SKU ist 305466 und categoryId ist 1100004
  • SKU ist 310181 und categoryId ist 1100004
  • SKU ist 308706 und categoryId ist 1740148

 

Beispiel

Wenn der oben genannte Ansatz auf die Beispiel-Website angewendet wird, resultiert daraus eine Webseite mit einer Reihe von Miniaturansichten für Produkte, wobei jede Ansicht die Schaltfläche „MEHR ANZEIGEN“ aufweist:

https://marketing.adobe.com/resources/help/de_DE/dm/shoppable-video/john-lewis/landing-0.html

Nachdem Sie alle auf der Seite verfügbaren Produktschnellansichten aktiviert haben, verfügen Sie über die folgende Liste mit den an das Back-End gesendeten Schnellansichtsanforderungen:

  • datafeed/candles-233396346.json
  • datafeed/candles-233978050.json
  • datafeed/candles-234024346.json
  • datafeed/candles-234024356.json
  • datafeed/candles-234024359.json
  • datafeed/cushions-233939848.json
  • datafeed/cushions-234019477.json
  • datafeed/cushions-234019483.json
  • datafeed/furniture-231747479.json
  • datafeed/furniture-232625621.json
  • datafeed/furniture-232625626.json
  • datafeed/furniture-233939810.json
  • datafeed/furniture-233939825.json
  • datafeed/furniture-233939828.json
  • datafeed/furniture-233939853.json
  • datafeed/furniture-233940334.json
  • datafeed/glassware-000064007.json
  • datafeed/glassware-230722193.json
  • datafeed/glassware-233916550.json
  • datafeed/glassware-233916597.json

Wenn Sie diese Serveraufrufe betrachten, sehen Sie, dass nur der Anforderungspfad produktspezifische Informationen enthält. Beachten Sie außerdem, dass die Abfragezeichenfolge überhaupt nicht verwendet wird und zwei unterschiedliche Typen von Datenteilen beteiligt sind:

  • Beim ersten Typ handelt es sich um Kerzen, Kissen, Möbel und Glaswaren. Dies kann als „Produktkategorie“ bezeichnet werden.
  • Der zweite Typ ist der Produktcode, wie beispielsweise „233916597“. Sie können davon ausgehen, dass dies die „Produkt-SKU“ ist.

Mit diesen Informationen hat die gesamte Schnellansichts-URL das folgende Muster:

/datafeed/$categoryId$-$SKU$.json

Basierend auf dieser Analyse stellen Sie fest, dass Sie die beiden folgenden Variablen für die Miniaturansichten verwenden können: categoryId und SKU.

Sie können jetzt ein Video und die zugehörigen Miniatur-Assets hochladen.

(Optional) Erstellen einer Viewer-Vorgabe für ein interaktives Video

Sie können diese Aufgabe überspringen und mit der nächsten fortfahren, wenn Sie eine der standardmäßig bereitgestellten Viewer-Vorgaben für interaktive Videos, Shoppable_Video_dark oder Shoppable_Video_light, verwenden möchten.

Wenn in der Authoring-Umgebung auf eine Miniaturansicht geklickt wird, wird eine Vorschau des Schnellansichtsdialogfelds angezeigt.

 

chlimage_1

Optional können Sie eine eigene benutzerdefinierte Viewer-Vorgabe für ein interaktives Video erstellen. Sie können unter anderem den Stil des Video-Players, die interaktiven Miniaturansichten und die Miniatur-Rasteransicht, die am Ende des Videos angezeigt wird, bestimmen.

Eine Viewer-Vorgabe für interaktive Videos rendert das Video entsprechend sowie alle Timeline-Segmente, die Sie hinzugefügt haben. Sie verwendet zudem eine standardmäßige Beispielschnellansicht, wenn Sie im Vorschaumodus auf eine Produktminiatur klicken. Auf diese Weise können Sie vor dem Veröffentlichen ihre Interaktivität testen.

Nachdem Sie die Viewer-Vorgabe gespeichert haben, wird ihr Status automatisch auf der Seite „Viewer-Vorgaben“ auf Ein festgelegt. Dieser Status bedeutet, dass sie in der Komponente „Dynamische Medien“ sichtbar ist und immer dann, wenn Sie die Vorschau eines Videos damit anzeigen. Denken Sie daran, die neue Viewer-Vorgabe auch manuell zu veröffentlichen.

Siehe Erstellen einer neuen Viewer-Vorgabe, um eine eigene Viewer-Vorgabe für interaktive Videos zu erstellen.

Hochladen eines Videos und der zugehörigen Miniatur-Assets

Wenn Sie Ihr Video und die Miniatur-Assets bereits hochgeladen haben, fahren Sie mit dem Schritt Hinzufügen von Interaktivität zum Video fort.

Wenn Sie falsche Videos oder Bilder hochgeladen haben oder Sie nicht mehr benötigte hochgeladene Videos oder Bilder löschen möchten, finden Sie weitere Informationen unter Löschen von Assets.

So laden Sie ein Video und die zugehörigen Miniatur-Assets hoch:

  1. Laden Sie das Video und die zugehörigen Miniatur-Assets in den bzw. die gewünschten Ordner hoch.

    Informationen hierzu finden Sie im Thema über das Hochladen von Assets.
    Informationen hierzu finden Sie im Thema über das Hochladen von Assets mithilfe der FTP-Auftragsplanung.

    Fügen Sie Ihrem Video nun Interaktivität hinzu.

Hinzufügen von Interaktivität zum Video

Sie fügen einem Video mithilfe des integrierten visuellen Editors auf der Seite „Interaktives Video erstellen“ Timeline-Segmente hinzu.

Nach dem Hinzufügen von Timeline-Segmenten fügen Sie Miniaturbilder in jedem Segment hinzu. Für jede von Ihnen hinzugefügte Miniatur wenden Sie eine Aktion darauf an. Beispielsweise können Sie eine Schnellansicht auf die Miniatur anwenden. Alternativ können Sie ihr einen Hyperlink zuweisen. (Beachten Sie, dass die URL-basierte Verlinkungsmethode nicht möglich ist, wenn Ihr interaktiver Inhalt über Links mit relativen URLs verfügt, insbesondere über Links zu Seiten in AEM Sites.)

Die Optionen „Rückgängig“ und „Wiederholen“ in der Nähe der oberen rechten Ecke der Seite werden während der aktuellen Erstellungs-/Bearbeitungssitzung unterstützt.

Nachdem Sie Ihr interaktives Video gespeichert haben, wird das Video sofort in der Vorschau geöffnet. Hier können Sie die Viewer-Vorgabe für interaktive Videos auswählen und das Video wiedergeben, um die ungefähre Darstellung anzuzeigen, wie es Kunden angezeigt wird.

So fügen Sie Ihrem Video Interaktivität hinzu:

  1. Navigieren Sie in der Ansicht „Assets“ zum Video, das Sie hochgeladen haben und interaktiv machen möchten.

  2. Führen Sie einen der folgenden Schritte aus:

    • Tippen Sie in der Symbolleiste auf Auswahl eingeben und wählen Sie dann das Video aus. Tippen Sie in der Symbolleiste auf Bearbeiten.
    • Tippen Sie auf das Video, um es auf der Seite „Viewer-Vorgaben“ zu öffnen. Tippen Sie in der Symbolleiste auf Bearbeiten.
  3. Führen Sie auf der Seite „Interaktives Video erstellen“ eine der folgenden Aktionen aus:

    • Tippen Sie auf die Schaltfläche Abspielen zum Wiedergeben des Videos. Wenn bestimmte Produkte, Services oder Einzelheiten, die Sie hervorheben möchten, in der Ansicht angezeigt werden, tippen Sie in der Symbolleiste auf Segment hinzufügen. Wiederholen Sie den Vorgang, bis Sie das Ende des Videos erreicht haben.

      Sie können jedem Zeitsegment, das Sie hinzufügen, mindestens ein Miniaturbild zuweisen und dann diese Miniaturen mit Schnellansichtsproduktseiten, damit Kunden über diese Einkäufe tätigen können, oder mit Webseiten verknüpfen, um weitere Informationen zu erhalten.

    • Tippen Sie auf die Schaltfläche Abspielen zum Wiedergeben des Videos. Wenn bestimmte Produkte, Services oder Einzelheiten, die Sie hervorheben möchten, in der Ansicht angezeigt werden, tippen Sie auf Pause. Tippen Sie auf Segment hinzufügen.

      Fahren Sie mit dem Wiedergeben und Anhalten des Videos an den Punkten entlang der Timeline fort, an denen Sie ein Segment hinzufügen möchten, bis Sie das Ende des Videos erreicht haben.
  4. (Optional) Ziehen Sie die Leiste auf dem Regler für Schnittfensterskalierung nach links zum Vergrößern oder nach rechts zum Verkleinern. Auf diese Art können Sie bestimmen, wie viele Details Sie in den Segmenten sehen, die Sie hinzugefügt haben.

    chlimage_1

    Abhängig von der Länge des Videos lauten die Standardwerte für die Segmentdauer wie folgt:

    Video-Länge Standardeinstellung für die Segmentdauer
    3 Minuten oder mehr 60 Sekunden
    2-3 Minuten 30 Sekunden
    1-2 Minuten 20 Sekunden
    30-60 Sekunden 10 Sekunden
    30 Sekunden oder weniger 5 Sekunden

    Die Zeitleiste des Videos beansprucht so viel Platz auf dem Bildschirm, wie für sie verfügbar ist. Anders ausgedrückt, wenn Sie die Größe des Browserfensters ändern, werden die hinzugefügten Segmente weiterhin mit ihrer korrekten Breite angezeigt.

    Dies wird durch die folgenden drei Screenshots veranschaulicht, die auf demselben Video basieren. Beachten Sie, dass die Breite jedes Segments abhängig von der Einstellung für die Schnittfensterskalierung geändert wird.

    chlimage_1
    Screenshot A

    Screenshot A oben zeigt die Standardansicht eines 29 Sekunden langen Produktvideos. Die Schnittfensterskalierung ist auf den Standardwert von 5 Sekunden eingestellt.

    chlimage_1
    Screenshot B

    Im Screenshot B oben wurde der Regler für die Schnittfensterskalierung vom Standardwert von 5 Sekunden auf 3 Sekunden gezogen. Beachten Sie, dass für die individuellen Zeitstempel der Schnittfensterskalierung jetzt 3-Sekunden-Intervalle gelten.

    chlimage_1
    Screenshot C

    Im Screenshot C oben wurde die Einstellung der Schnittfensterskalierung auf 8 Sekunden gezogen. Beachten Sie, wie die Segmente, die Produktminiaturansichten enthalten, verkleinert wurden. Ein solches „Herauszoomen“ ist bei langen Videos sinnvoll, um eine Übersicht über mehrere Segmente zu erhalten, die normalerweise auf die Breite einer Seite passen.

  5. (Optional) Führen Sie einen der folgenden Schritte aus:

    • So passen Sie die Start- und Endzeit eines Segments an:

      Wählen Sie ein Segment und ziehen Sie das blaue ovale Symbol am Anfang oder Ende, um die Zeit für den Beginn bzw. das Ende anzupassen. Der angezeigte Videoframe wechselt auf Grundlage Ihrer Anpassungen zur entsprechenden Zeit im Video. Die Verschiebung des Timeline-Segments ist auf Grundlage der benachbarten Segmente in der Timeline beschränkt. Die minimal zulässige Segmentzeit lautet eine Sekunde.

      Verwenden Sie die folgenden Navigationsverknüpfungen, um Ihre Videosegmente schnell zu überprüfen und zu optimieren:

      • Tippen Sie auf das vordere blaue Oval zum Positionieren direkt am Segmentanfang.
      • Tippen Sie auf das hintere blaue Oval zum Positionieren direkt am Segmentende.
      • Tippen Sie auf das gesamte Segment, um die Videowiedergabe auf den Anfang dieses Segments zurückzusetzen.
    Neupositionierung eines Timeline-Segments
    Neupositionierung des Endes eines Timeline-Segments
    • So löschen Sie ein Segment:

      Wählen Sie das letzte Timeline-Segment und tippen Sie dann in der Symbolleiste auf Segment löschen. Wenn zwei oder mehr Segmente ausgewählt werden, ist die Funktion „Segment löschen“ deaktiviert.

      Sie können nur das letzte Segment löschen. Wenn Sie beispielsweise alle Timeline-Segmente löschen möchten, müssen Sie immer zunächst das letzte auswählen und dann auf Segment löschen tippen.
  6. Wählen Sie ein Zeitsegment aus, mit dem Sie das oder die Miniaturbild(er) verknüpfen möchten.  

  7. Tippen Sie auf der rechten Seite des Videos auf die Registerkarte Inhalt.

  8. Tippen Sie auf der Registerkarte „Inhalt“ auf Assets auswählen, durchsuchen Sie alle Bild-Assets und wählen Sie diejenigen aus, die Sie in Ihrem Video verwenden möchten. Die ausgewählten Assets werden im Asset-Auswahlbereich auf der Registerkarte „Inhalt“ hinzugefügt.

  9. In der Asset-Auswahl auf der Registerkarte „Inhalt“ gehen Sie wie folgt vor:

    So weisen Sie dem ausgewählten Timeline-Segment eine Miniaturansicht zu:

    Tippen Sie im Asset-Auswahlbereich auf der rechten Seite auf das Bild.

    Sie können so viele Miniaturen hinzufügen, wie in einem Timeline-Segment vorhanden sein sollen. Für jedes von Ihnen ausgewählte Bild wird ein Häkchen über dem Bild in der Asset-Auswahl angezeigt.

    So sortieren Sie Miniaturansichten in einem ausgewählten Timeline-Segment neu:

    Ziehen Sie ein Bild-Asset an seine neue Position im Timeline-Segment.

    Durch die Neuanordnung von Assets wird ihre Anzeigereihenfolge in dem Bereich geändert, der an den Video-Player angrenzt, wenn ein Kunde das Video wiedergibt.

    So entfernen Sie eine Miniaturansicht aus dem ausgewählten Timeline-Segment:

    Führen Sie einen der folgenden Schritte aus:

    • Tippen Sie im Asset-Auswahlbereich auf ein Bild mit einem Häkchen, um es abzuwählen. Das Bild-Asset wird aus dem Timeline-Segment entfernt.
    • Tippen Sie im ausgewählten Timeline-Segment auf ein Bild und tippen Sie in der Symbolleiste auf Produkt löschen.
    Asset-Auswahl
    Durch Tippen wird ein Bild in einem Asset-Auswahlbereich dem ausgewählten Timeline-Segment hinzugefügt.
  10. Wählen Sie ein einzelnes Miniaturbild in einem der Timeline-Segmente und tippen Sie dann auf die Registerkarte Aktionen.

  11. Führen Sie einen der folgenden Schritte aus:

    So verknüpfen Sie das ausgewählte Miniaturbild mit einer Schnellansicht

    Tippen Sie unter „Aktionstyp“ auf Schnellansicht.

    Wenn Sie ein AEM Sites- und eCommerce-Kunde sind, gehen Sie wie folgt vor:

    • Beachten Sie, dass das Textfeld „SKU-Wert“ mit der Bestandseinheit (Stock Keeping Unit, SKU) des ausgewählten Produkts vorgefüllt ist. Hierbei handelt es sich um einen eindeutigen Bezeichner für die jeweiligen Produkte oder Services, die Sie anbieten. Dies wird automatisch ausgefüllt, wenn das Bild mit einem Produkt in AEM eCommerce verknüpft ist.
    • Wenn die vorausgefüllte SKU falsch ist, tippen oder klicken Sie auf das Produktauswahlsymbol (Lupe), um die Seite „Produkt wählen“ zu öffnen. Tippen oder klicken Sie auf das Produkt, das Sie verwenden möchten, und tippen Sie auf das Häkchen in der rechten oberen Ecke der Seite, um zum Editor für interaktive Videos zurückzukehren.

     Wenn Sie kein AEM Sites- oder eCommerce-Kunde sind, gehen Sie wie folgt vor:

    • Siehe Ermitteln von Hotspot-Variablen. Sie müssen diese Variablen definieren. 
    • Standardmäßig verwendet dieses SKU-Feld den Dateinamen des Bild-Assets ohne Erweiterung. Wenn Sie eine standardmäßige Namenskonvention für Ihre Dateien auf Grundlage der SKU befolgen, ist hierfür für gewöhnlich keine zusätzliche Bearbeitung erforderlich. 
    • Bearbeiten Sie andernfalls den Standardwert und geben Sie den korrekten SKU-Wert ein. Geben Sie im Textfeld „SKU-Wert“ die Bestandseinheit (Stock Keeping Unit, SKU) des Produkts ein. Hierbei handelt es sich um einen eindeutigen Bezeichner für die jeweiligen von Ihnen angebotenen Produkte oder Services. Der variable Teil der Schnellansichtsvorlage wird automatisch mit dem eingegebenen SKU-Wert ausgefüllt, sodass das System das Bild, auf das getippt wird, mit der Schnellansicht einer bestimmten SKU verbinden kann.

    (Optional) Wenn die Schnellansicht andere Variablen enthält, die Sie zur weiteren Identifikation eines Produkts benötigen, tippen Sie auf Generische Variable hinzufügen. Geben Sie eine zusätzliche Variable im Textfeld an. Beispielsweise ist category=Womens eine hinzugefügte Variable.

     

    So verknüpfen Sie das ausgewählte Miniaturbild mit einem Hyperlink

    Tippen Sie unter „Aktionstyp“ auf Hyperlink und führen Sie dann einen der folgenden Schritte aus:

    • Wenn Sie AEM Sites-Kunde sind, tippen Sie auf das Symbol zur Site-Auswahl (Ordner), um zu einer Webseite zu navigieren. Beachten Sie, dass die URL-basierte Verlinkungsmethode nicht möglich ist, wenn Ihr interaktiver Inhalt über Links mit relativen URLs verfügt, insbesondere über Links zu Seiten in AEM Sites.
    • Wenn Sie nur dynamische Medien verwenden, geben Sie im Textfeld „HREF“ den vollständigen URL-Pfad zu einer verknüpften Webseite an.

    Stellen Sie sicher, dass Sie angeben, ob Sie den Link in einem neuen Browser oder auf der aktuellen Registerkarte öffnen möchten.

    So bearbeiten Sie eine bereits zu einem Miniaturbild zugewiesene Aktion Tippen Sie in einem Timeline-Segment auf ein Miniaturbild, das rechts neben seinem Textfeld über ein Kettenglied verfügt. Das Kettenglied deutet darauf hin, dass ihm eine Aktion zugewiesen ist. Tippen Sie auf die Registerkarte Aktionen zum Vornehmen Ihrer Änderungen.
    So ändern Sie das Textfeld eines Miniaturbildes

    Standardmäßig verwendet das Textfeld das Metadatenfeld Titel des Miniaturbilds. Wenn Titel nicht vorhanden ist, wird stattdessen der Dateiname des Miniaturbilds verwendet, jedoch ohne die Erweiterung.

    Um das Textfeld eines Miniaturbilds zu ändern, geben Sie den gewünschten Text auf der Registerkarte Aktionen direkt unter dem angezeigten Bild-Asset ein. Siehe die Abbildung unten.

    Beachten Sie, dass das neue Textfeld nur durch den Video-Player an sich und den Miniaturtext, der im Timeline-Segment angezeigt wird, verwendet wird. Die Änderung des Textfelds wirkt sich nicht auf das Metadatenfeld „Titel“ des Miniaturbilds oder auf den Dateinamen aus.

    So setzen Sie von Ihnen vorgenommene Änderungen zurück Tippen Sie in der Nähe der oberen rechten Ecke der Seite auf Rückgängig oder Wiederholen.
    Textfeld
    Dem Miniaturbild wird ein neues Textfeld hinzugefügt.
  12. Führen Sie einen der folgenden Schritte aus:

    • Wiederholen Sie die Schritte 6 bis 11, um den Timeline-Segmenten des Videos weitere Miniaturbilder hinzuzufügen.
    • Fahren Sie mit dem optionalen Schritt 13 fort.
  13. (Optional) Führen Sie einen der folgenden Schritte aus:

    • Segment zusammenführen: Sie können zwei benachbarte Segmente (mit oder ohne zugewiesenen Miniaturansichten) in ein Segment zusammenführen.

      Tippen Sie in der Timeline auf zwei oder mehr angrenzende Segmente, die Sie zu einem einzigen zusammenführen möchten. Beachten Sie, dass es unten in der Abbildung an den beiden ausgewählten Segmenten keine blauen ovalen Ziehpunkte gibt.

    Tippen Sie in der Symbolleiste auf Segment zusammenführen.

    chlimage_1
    Zusammenführen zweier ausgewählter Segmente mit fünf Sekunden Länge in ein zehn Sekunden langes Segment.
    • Segment teilen: Sie können ein einzelnes Segment in zwei gleich lange Segmente aufteilen. Wenn dem Segment bereits Produktminiaturansichten zugewiesen sind, werden die Miniaturansichten im linken Segment zusammengefasst.

    Klicken oder tippen Sie in der Timeline auf ein Segment, das Sie in der Hälfte teilen möchten, und tippen Sie dann in der Symbolleiste auf Segment teilen.

    Wenn Sie zwei oder mehr Segmente auswählen, wird die Funktion „Segment teilen“ deaktiviert.

    chlimage_1
    Teilen eines ausgewählten zehn Sekunden langen Segments in zwei Segmente mit je fünf Sekunden.
  14. Tippen Sie auf Speichern und dann auf OK, um zur Seite „Viewer-Vorgaben“ des Videos zurückzukehren. Wählen Sie auf der Seite links neben dem Video eine Viewer-Vorgabe aus und geben Sie das Video wieder, um die Ergebnisse anzuzeigen.

    In der Nähe der rechten oberen Ecke der Seite „Interaktives Video erstellen“ wird der Name der aktuell ausgewählten und für dieses Video verwendeten Viewer-Vorgabe angezeigt. Tippen Sie auf den Namen, um eine andere Viewer-Vorgabe auszuwählen. Beispielsweise können Sie mit der Viewer-Vorgabe Shoppable_video_light das Video mit einem weißen Anzeigebereich wiedergeben, der an das Video angrenzt. Der Anzeigebereich ist dort, wo die klickbaren Miniaturbilder während der Wiedergabe angezeigt werden. Mit der Viewer-Vorgabe Shoppable_video_dark können Sie das Video mit einem schwarzen Anzeigebereich wiedergeben, der an das Video angrenzt.
    Wenn Sie Ihre eigene Viewer-Vorgabe für interaktive Videos erstellt haben, sehen Sie sie auch in der Liste der Vorgaben, aus der Sie eine Auswahl treffen können.

    Hinweis:

    Wenn Sie Ihr interaktives Video speichern, wird automatisch eine .vtt-Datei gespeichert. Die .vtt-Datei wird im Ordner_VTT gespeichert. Dieser befindet sich im Stamm von Assets. Die Datei und der Ordner sind erforderlich, damit das interaktive Video auf Ihrer Website richtig wiedergegeben werden kann.Daher sollten Sie weder den Ordner_VTT noch dessen Inhalte verschieben, bearbeiten oder löschen.

  15. Veröffentlichen des interaktiven Videos Durch das Veröffentlichen wird der Integrationscode oder die URL erstellt, die Sie schließlich kopieren und auf die Websiteoberfläche einfügen.

    Wenn Sie die Interaktivität mit Schnellansichten hinzugefügt haben, verwenden Sie nur den Integrationscode. Wenn Sie die Interaktivität mit per Hyperlink verbundenen Webseiten hinzugefügt haben, können Sie auch die veröffentlichte URL verwenden. Beachten Sie jedoch, dass die URL-basierte Methode zur Verlinkung nicht möglich ist, wenn Ihr interaktiver Inhalt Links mit relativen URLs enthält, insbesondere Links zu AEM Sites-Seiten.

    Informationen hierzu finden Sie im Thema über das Veröffentlichen von Assets.

    Hinweis:

    Um ein Video mit Shopping-Funktion und Schnellansichten zu veröffentlichen, stellen Sie sicher, dass Sie auch alle zugehörigen Bild-Assets des Videos aus Ihrem eCommerce-Bereich separat veröffentlichen.

    Nachdem Sie Timeline-Segmente hinzugefügt und das interaktive Video veröffentlicht haben, sind Sie bereit, sie zur Einstiegsseite Ihrer vorhandenen Website hinzuzufügen. Informationen hierzu finden Sie im Thema über das Integrieren eines interaktiven Videos auf Ihrer Website.

Veröffentlichen interaktiver Video-Assets

Weitere Informationen zum Veröffentlichen interaktiver Video-Assets finden Sie in Veröffentlichen von Assets.

Integrieren eines interaktiven Videos mit Ihrer Website

Nachdem Sie ein Video hochgeladen, zu diesem Timeline-Segmente hinzugefügt und das interaktive Video veröffentlicht haben, sind Sie nun in der Lage, es zu Ihrer vorhandenen Website hinzuzufügen.

Wenn Sie AEM Sites-Kunde sind, können Sie das interaktive Video hinzufügen, indem Sie die interaktive Medienkomponente auf Ihre Seite ziehen. Siehe Hinzufügen von Assets mit dynamischen Medien zu Seiten.

 Wenn Sie nur AEM Assets verwenden, können Sie das interaktive Video Ihrer Website manuell hinzufügen, wie in diesem Abschnitt beschrieben.

  1. Kopieren Sie den Integrationscode oder die URL des veröffentlichten interaktiven Videos.
    Informationen finden Sie unter Einbetten des Video- oder Bild-Viewers auf einer Webseite.
    Wenn Sie die Interaktivität mit Schnellansichten hinzugefügt haben, verwenden Sie nur den Integrationscode. Wenn Sie die Interaktivität mit per Hyperlink verbundenen Webseiten hinzugefügt haben, können Sie auch die veröffentlichte URL verwenden. Beachten Sie jedoch, dass die URL-basierte Methode zur Verlinkung nicht möglich ist, wenn Ihr interaktiver Inhalt Links mit relativen URLs enthält, insbesondere Links zu AEM Sites-Seiten.
  2. Ermitteln Sie im Webseitencode des Ziels, wo sich das statische Video befindet.
  3. Entfernen Sie das statische Video und ersetzen Sie den Code durch den kopierten Integrationscode oder die URL, den bzw. die Sie wie besehen aus AEM Assets kopiert haben.
    Der kopierte Integrationscode wird für eine responsive Umgebung festgelegt. Daher sollte automatisch der Bereich angepasst werden, der zuvor vom statischen Video belegt war.

Hinweis:

An dieser Stelle sind Sie fertig, wenn Sie die Interaktivität mit ausschließlich per Hyperlink verbundener Webseiten hinzugefügt haben.

Wenn Sie jedoch eine Interaktivität hinzugefügt haben, um eine Schnellansicht auszulösen, dienen die Miniaturen, die an das interaktive Video angrenzen, nur zu Anzeigezwecken. Sie sind nicht in Ihren vorhandenen Schnellansichten integriert. In einem solchen Fall müssen Sie das interaktive Video in den vorhandenen Schnellansichten auf Ihrer Website integrieren.

Beispiel

Verwenden der Demowebsite als ein Beispiel:

https://marketing.adobe.com/resources/help/de_DE/dm/shoppable-video/john-lewis/landing-0.html

Beachten Sie, dass der standardmäßige Video-Einbettungscode wie folgt lautet:

<style type="text/css">
	#s7video_div.s7videoviewer{
		 width:100%; 
		 height:auto;
	}
</style>

<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/VideoViewer.js"></script>
<div id="s7video_div"></div>
<script type="text/javascript">
	var s7videoviewer = new s7viewers.VideoViewer({
		"containerId" : "s7video_div",
		"params" : { 
			"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
			"contenturl" : "https://demos-pub.assetsadobe.com/", 
			"config" : "/etc/dam/presets/viewer/Video",
			"config2": "/etc/dam/presets/analytics",
			"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
			"posterimage": "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4",
			"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
	}).init();
</script>

Zur Integration müssen Sie den Video-Einbettungscode nur durch den Einbettungscode des interaktiven Videos aus AEM ersetzen. Das Ergebnis sehen sie unter folgender URL. Ein auf der Seite vorhandenes interaktives Video wird zwar angezeigt, es ist jedoch noch nicht mit den vorhandenen Schnellansichten integriert:

https://marketing.adobe.com/resources/help/de_DE/dm/shoppable-video/john-lewis/landing-1.html

Integrieren eines interaktiven Videos mit einer vorhandenen Schnellansicht

Hinweis:

Diese Aufgabe ist nur relevant, wenn Sie ausschließlich AEM Assets verwenden.

Der letzte Schritt in diesem Prozess ist, das interaktive Video in einer vorhandenen Schnellansichtsimplementierung zu integrieren, die auf Ihrer Website verwendet wird. Es gibt keine Lösung für die Integration, die für alle Fälle funktioniert. Jede Schnellansichtsimplementierung ist einzigartig. Daher ist ein spezifischer Ansatz erforderlich, wofür höchstwahrscheinlich die Unterstützung eines Front-End-IT-Mitarbeiters nötig ist.

Die vorhandene Schnellansichtsimplementierung stellt normalerweise eine Kette von untereinander verknüpften Aktionen dar, die auf der Webseite in der folgenden Reihenfolge stattfinden:

  1. Ein Benutzer löst ein Element auf der Benutzeroberfläche Ihrer Website aus.
  2. Der Front-End-Code ruft anhand des in Schritt 1 ausgelösten Benutzeroberflächenelements eine Schnellansichts-URL auf.
  3. Der Front-End-Code sendet mithilfe der in Schritt 2 abgerufenen URL eine Ajax-Anforderung.
  4. Die Back-End-Logik gibt dem Front-End-Code die entsprechenden Schnellansichtsdaten oder -inhalte zurück.
  5. Der Front-End-Code lädt die Schnellansichtsdaten oder -inhalte.
  6. Optional wandelt der Front-End-Code die geladenen Schnellansichtsdaten in eine HTML-Darstellung um.
  7. Der Front-End-Code zeigt ein modales Dialogfeld an und rendert den HTML-Inhalt auf dem Bildschirm für den Endbenutzer.

Diese Aufrufe stellen möglicherweise keine unabhängigen öffentlichen API-Aufrufe dar, die durch die Webseitenlogik in einem beliebigen Schritt aufgerufen werden können. Vielmehr handelt es sich um einen verketteten Aufruf, in dem der jeweils nächste Schritte in der letzten Phase (Callback) des vorherigen Schritts ausgeblendet ist.

Sobald das interaktive Video Schritt 1 und teilweise Schritt 2 ersetzt, sofern ein Benutzer auf eine Miniaturansicht im interaktiven Video klickt, wird eine solche Benutzerinteraktion durch den Viewer verarbeitet. Der Viewer gibt an die Webseite ein Ereignis zurück, das alle zuvor zu AEM hinzugefügten Miniaturdaten aufweist.

In einem solchen Ereignishandler nimmt der Front-End-Code Folgendes vor:

  • Er lauscht am Ereignis, das durch das interaktive Video ausgegeben wird.
  • Er erstellt anhand der Miniaturdaten eine Schnellansichts-URL.
  • Er löst den Schnellansichts-Ladevorgang vom Back-End aus und rendert die Schnellansicht auf dem Bildschirm, um sie anzuzeigen.

Außerdem unterstützt der interaktive Video-Viewer den Vollbildmodus. Der Endbenutzer löst Schnellansichten aus, indem er auf eine Miniaturansicht klickt, ohne das Vollbild verlassen zu müssen. Um diese Funktion zu erzielen, ändern Sie den Front-End-Code so, dass das modale Dialogfeld für die Schnellansicht am Container des Viewers angehängt ist. Fügen Sie keinen Dokument-TEXT oder ein anderes Webseitenelement hinzu, das nicht verfügbar ist, wenn der Viewer im Vollbildmodus angezeigt wird. Der Code, der für diese Aufgabe zuständig ist, muss an einem weiteren Viewer-Callback lauschen, der gesendet wird, nachdem der Viewer auf der Seite geladen wurde.

Der von AEM zurückgegebene Einbettungscode verfügt über einen einsatzbereiten Ereignishandler. Er ist auskommentiert, wie in dem folgenden hervorgehobenen Codefragment zu sehen ist:

 

<style type="text/css">
	#s7interactivevideo_div.s7interactivevideoviewer{
		 width:100%; 
		 height:auto;
	}
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
	var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
		"containerId" : "s7interactivevideo_div",
		"params" : { 
			"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
			"contenturl" : "https://demos-pub.assetsadobe.com/", 
			"config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
			"config2": "/etc/dam/presets/analytics",
			"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
			"interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
			"VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
			"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
	})
	/* // Example of interactive video event for quick view.
		 s7interactivevideoviewer.setHandlers({ 
			"quickViewActivate": function(inData) {
 				var sku=inData.sku; //SKU for product ID
				//To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
				loadQuickView(sku); //Replace this call with your quickview plugin
				//Please refer to your quickviewer plugin for the quickview call
			 }, 
"initComplete":function() { 
				//--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
				var popup = document.getElementById('quickview_div'); // get custom quick view container
				popup.parentNode.removeChild(popup); // remove it from current DOM
				var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
				var inner_container = document.getElementById(sdkContainerId); 
				inner_container.appendChild(popup); //Attach custom quick view container to viewer
			 } 
		 });
	*/
	s7interactivevideoviewer.init();
</script>

Daher muss die Auskommentierung des Codes nur aufgehoben und der Platzhaltertext des Handlers durch den Code für die betreffende Webseite ersetzt werden.

Der Standard-Einbettungscode enthält zwei standardmäßige Callback-Handler: quickViewActivate und initComplete. Der quickViewActivate-Handler wird beim Klicken auf eine Miniaturansicht im Viewer ausgelöst. Verwenden Sie ihn, um den Viewer in die Aktivierungslogik für die Schnellansicht zu integrieren. Der initComplete-Handler wird nur einmal beim Laden des Viewers auf der Seite ausgelöst. Dieser Handler wird verwendet, um die Position des Schnellansichtsdialogfelds im DOM der Webseite anzupassen.

Der Prozess der Erstellung der Schnellansichts-URL ist im Prinzip das Gegenteil des Prozesses, der verwendet wird, um die zuvor in diesem Thema erläuterten Miniaturvariablen zu ermitteln. Anhand der zuvor verwendeten Beispiele für Schnellansichts-URLs können Sie sehen, wie sich die Schnellansichts-URL in den einzelnen Fällen zusammensetzt:

Einzelne SKU, die sich in der Abfragezeichenfolge befindet

s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/json?productId=" + inData.sku + "&source=100";
     },
 });
Einzelne SKU, die sich im URL-Pfad befindet s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/product/" + inData.sku;
     },
 });

SKU und Kategorie-ID in der Abfragezeichenfolge

s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku;
     },
 });

Für den letzten Schritt, in dem die Schnellansichts-URL ausgelöst und der Schnellansichtsbereich aktiviert wird, benötigen Sie höchstwahrscheinlich die Unterstützung eines Front-End-Experten aus Ihrer IT-Abteilung. Diese Person verfügt am ehesten über das entsprechende Fachwissen, um die Schnellansichtsimplementierung im entsprechenden Schritt auszulösen, der eine einsatzbereite Schnellansichts-URL enthält.

Sie können sehen, wie diese Schritte auf die Demowebsite angewendet werden, um den Schnellansichtscode vollständig in ein interaktives Video zu integrieren. Zuvor in diesem Thema wurde die Struktur der Schnellansichts-URL wie folgt ermittelt:

/datafeed/$CategoryId$-$SKU$.json

Diese URL kann einfach innerhalb der Handlers quickViewActivate rekonstruiert werden, indem die Felder categoryId und sku verwendet werden, die im durch den Code des Viewers an den Handler übergebenen Objekt inData verfügbar sind:

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

Auf der Demowebsite wird die Anzeige des Schnellansichtsdialogfelds durch einen einfachen loadQuickView()-Funktionsaufruf ausgelöst. Diese Funktion akzeptiert als einziges Argument die Schnellansichtsdaten-URL. Der letzte Schritt bei der Integration des interaktiven Videos besteht darin, die folgende Codezeile dem quickViewActivate-Handler hinzuzufügen:

loadQuickView(quickViewUrl);

Zu guter Letzt stellen Sie sicher, dass Ihr Schnellansichtsdialogfeld an das Containerelement des Viewers angehängt wird. Der Standard-Einbettungscode bietet Beispielschritte, um diese Funktion zu erzielen. Um einen Verweis auf das Containerelement des Viewers zu erhalten, können Sie die folgenden Codezeilen verwenden:

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);

Hierbei ist inner_container ein Verweis auf ein DIV-Element, das vom Viewer verwaltet wird. Das Dialogfeld sollte ein untergeordnetes Element dieses DIV sein.

Die Schritte zum eigentlichen Auffinden des modalen Dialogfeldelements und zum Anhängen an den Container hängen vom spezifischen Fall ab. Auch hier sollten Sie die Hilfe eines Front-End-Entwicklers in Anspruch nehmen, der mit der benötigten Schnellansichtsimplementierung vertraut ist.

Im Falle der Beispielwebsite wird das modale Schnellansichtsdialogfeld als DIV implementiert, wobei die ID der modalen Schnellansicht direkt an den Dokument-TEXT angehängt wird. Deshalb ist der Code, um das Dialogfeld in den Container des Vierwers zu verschieben, ganz unkompliziert, wie Sie im Folgenden sehen können:

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));

Der vollständige Quellcode lautet wie folgt:

<style type="text/css">
	#s7interactivevideo_div.s7interactivevideoviewer{
		 width:100%; 
		 height:auto;
	}
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
	var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
		"containerId" : "s7interactivevideo_div",
		"params" : { 
			"serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
			"contenturl" : "https://demos-pub.assetsadobe.com/", 
			"config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
			"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
			"interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
			"VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
			"asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
	})
	// Example of interactive video event for quick view.
		 s7interactivevideoviewer.setHandlers({ 
			"quickViewActivate": function(inData) {
 				var sku=inData.sku; //SKU for product ID
 				var categoryId=inData.categoryId; //categoryId
				var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
				loadQuickView(quickViewUrl);
			 },
			"initComplete":function() { 
				//--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
				var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
				var inner_container = document.getElementById(sdkContainerId);
				inner_container.appendChild(document.getElementById("quickview-modal"));
			 } 
		 });
	s7interactivevideoviewer.init();
</script>

Die endgültige Demowebsite mit dem vollständig integrierten interaktiven Video hat folgendes Aussehen:

https://marketing.adobe.com/resources/help/de_DE/dm/shoppable-video/john-lewis/landing-3.html

Verwenden von Schnellansichten zum Erstellen von benutzerdefinierten Popups

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie