Interactieve video's

U kunt eenvoudig interactieve video's maken die de conversie rechtstreeks vanuit de video sturen. De betrokkenheid van de klant bij de video vindt plaats in een deelvenster naast de videospeler, waar gerelateerde service-, informatie- of productminiaturen worden weergegeven op basis van wat in de video wordt getoond. Klanten kunnen op de miniatuur tikken en rechtstreeks aan de service worden gekoppeld, het item toevoegen aan een winkelwagentje voor directe aankoop of worden gekoppeld aan een webpagina voor meer informatie.

Wanneer de video eindigt, wordt een visueel overzicht van al dienstenaanbod getoond om een vraag aan actie te drijven. Klanten hebben nog een kans om op het gewenste item te tikken. Handelbare en specifieke ervaringen zoals deze verhogen de betrokkenheid van klanten en conversies.

Zie ook Interactieve afbeeldingen.

Interactieve video in actie

Als u een interactieve, verschuivende video in actie wilt zien, klikt u op Live demos, bladert u naar de Shoppable Media-kop op de pagina en klikt u op de schokkerige video.

  • Terwijl producten tijdens het afspelen in de video worden gebruikt, wordt het identieke product rechts weergegeven als een miniatuurafbeelding.

  • Klik op de miniatuur als u de video wilt pauzeren en de Snelle weergave van het product wilt openen. Klik bijvoorbeeld op de miniatuurafbeelding van de KitchenAid in de video om een centrifugeweergave van 360 graden van de mixer te bekijken of zoom in om details van de mixer te zien.

Een frame van een interactieve, verschuifbare videoA-videoframe legt vast van een interactieve, schokkende video.

OPMERKING

Als u een interactieve video maakt om een webpagina te starten wanneer een gebruiker op een miniatuurafbeelding klikt, blokkeren sommige apparaten het openen van de pop-upwebpagina. In dergelijke gevallen moet u de instelling van de pop-upblokkering op het apparaat wijzigen. Tik bijvoorbeeld op een Apple iPhone 6 op Settings > Safari > Pop-ups blokkeren en schuif het besturingselement vervolgens naar Off. Wanneer u nu een interactieve video afspeelt en op een miniatuur klikt, wordt u gevraagd of u de pop-up wilt openen. Als u akkoord gaat, wordt de webpagina geopend.

Controleren hoe interactieve video's worden gemaakt

Speel een analyse op hoe de interactieve video's worden gecreeerd 🔗. (7 minuten 30 seconden) Hoewel de videoanalyse met Activa op bestelling wordt gemerkt, zijn de principes en de stappen nog van toepassing op Interactive Video in Adobe Experience Manager Assets.

Adobe Klantsucces Webinar

De webinar ‘Interactive Video, Link Sharing en YouTube sharing in Experience Manager Assets gebruiken’ leert u hoe u interactieve video en andere functies kunt gebruiken om conversiegedreven gebeurtenissen te koppelen aan uw video marketing inhoud.

Snel starten: Interactieve video's

De volgende stapsgewijze beschrijving van de workflow is ontworpen om u te helpen snel aan de slag te gaan met interactieve video's in Dynamic Media.

Zoek naar Voorbeeld rubriek binnen enkele taken van het Snelle Begin. Het bevat een korte zelfstudie die is gebaseerd op deze startdemo-webpagina die nog niet interactiviteit heeft toegevoegd:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=nl-NL?lang=nl-NL

Met behulp van de voorbeelden kunt u de stappen illustreren voor het integreren van interactieve video's op uw eigen website.

Wanneer u de zelfstudie voltooit in de laatste voorbeeldsectie, ziet de laatste demo-webpagina met de volledig geïntegreerde interactieve video er als volgt uit:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-3.html?lang=nl-NL?lang=nl-NL

Interactieve videoworkflow:

  1. (Optioneel) Quickview-variabelen identificeren - Begin door dynamische variabelen te identificeren die door uw bestaande QuickView-implementatie worden gebruikt. U gebruikt de variabelen om productminiaturen toe te wijzen aan hun overeenkomstige productQuickView wanneer u uw interactieve video creeert. Zie (Optioneel) Variabelen in QuickView identificeren.

    Deze stap is alleen vereist als aan alle volgende voorwaarden wordt voldaan:

    • U wilt interactiviteit aan uw video toevoegen door aan Snelle meningen in werking te stellen.
    • Uw implementatie van Experience Manager maakt niet gebruik van een eCommerce-integratieframework om productgegevens vanuit elke eCommerce-oplossing, zoals IBM® WebSphere® Commerce, Elastic Path, hybris of Intershop, naar de Experience Manager te halen. Zie eCommerce-concepten in Experience Manager Assets.
  2. (Optioneel) Een voorinstelling voor een interactieve videoviewer maken: pas de weergave en het gedrag aan van de verschillende componenten waaruit de speler bestaat, zoals de videoscrubber en de interactieve miniaturen.

    Het is niet nodig een eigen voorinstelling voor een interactieve videoviewer te maken als u de voorinstellingen Shoppable_Video_Light of Shoppable_Video_Dark voor de externe interactieve videoviewer wilt gebruiken.
    Zie Een nieuwe voorinstelling voor de viewer maken (optioneel) en Speciale overwegingen voor het maken van een interactieve voorinstelling voor de viewer.

  3. Een video en de bijbehorende afbeeldingselementen uploaden: hiermee kunt u een video en de bijbehorende afbeeldingen uploaden die u interactief wilt maken.

    Zie Een video en de bijbehorende miniatuurelementen uploaden.

  4. Interactiviteit toevoegen aan uw video - Voeg een of meer tijdsegmenten toe aan de video. Koppel vervolgens afbeeldingsminiaturen aan die tijdsegmenten. Wijs elke afbeeldingsminiatuur toe aan een handeling zoals een hyperlink, een Snelle weergave of een Ervingspatroon.

    (De op URL gebaseerde methode van het verbinden is niet mogelijk als uw interactieve inhoud verbindingen met relatieve URLs, in het bijzonder verbindingen met de pagina's van de Plaatsen van de Experience Manager heeft.)

    Voltooi de bewerking door de interactieve video-elementen te publiceren. Bij het publiceren wordt de insluitcode of URL gemaakt die u uiteindelijk kopieert en toepast op de bestemmingspagina van uw website. Zie Interactiviteit toevoegen aan uw video.

    Zie Elementen publiceren.

  5. Een interactieve video in Experience Manager toevoegen aan uw website of uw website

    Als u de Plaatsen van de Experience Manager, of Experience Manager eCommerce, of allebei gebruikt, kunt u de interactieve video aan een Web-pagina in Experience Manager direct toevoegen door de Interactieve component van Media op de pagina te slepen. Zie Dynamic Media-elementen toevoegen aan pagina's.

    Gebruik de insluitcode of URL om uw interactieve video te integreren met uw ervaringen op de website. Zie Een interactieve video integreren met uw website.

    Als u een externe WCM (Web Content Manager) gebruikt, moet u de nieuwe interactieve video integreren met de bestaande implementatie van de Snelle weergave die op uw website wordt gebruikt. Zie Een interactieve video integreren met een bestaande QuickView.

(Optioneel) Quickview-variabelen identificeren

OPMERKING

Deze taak is alleen vereist als aan de volgende voorwaarden wordt voldaan:

  • U wilt interactiviteit aan uw video toevoegen door aan Snelle meningen in werking te stellen.
  • Uw implementatie van Experience Manager maakt niet gebruik van een eCommerce-integratieframework om productgegevens vanuit elke eCommerce-oplossing, zoals IBM® WebSphere® Commerce, Elastic Path, hybris of Intershop, naar de Experience Manager te halen. Zie eCommerce-concepten in Experience Manager Assets.

Als uw implementatie van Experience Manager eCommerce gebruikt, kunt u deze taak overslaan en aan de volgende taak te werk gaan.

Begin door dynamische variabelen te identificeren die door uw bestaande implementatie van QuickView worden gebruikt zodat u productduimnagels aan hun overeenkomstige productSnelle mening tijdens het interactieve videoaanmaakproces kunt in kaart brengen.

Wanneer u tijdsegmenten aan een video toevoegt, wijst u SKU (Stock Keeping Unit) en om het even welke extra variabelen aan elke duimnagel toe u aan een segment toevoegt. Dergelijke variabelen worden later gebruikt om het juiste product van de Snelle mening te tonen.

Het is belangrijk om behoorlijk te identificeren welke variabelen worden vereist om een productQuickView uniek teweeg te brengen.

Soms is het voldoende om IT-specialisten te raadplegen die verantwoordelijk zijn voor uw bestaande Quickview-implementatie. Zij zullen waarschijnlijk weten welke minimumreeks gegevens noodzakelijk is om Snelle mening in het systeem te identificeren. Het is echter mogelijk om gewoon het bestaande gedrag van de front-end code te analyseren.

De meeste implementaties van de Snelle mening gebruiken het volgende paradigma:

  • De gebruiker activeert een gebruikersinterface-element op de website. Als u bijvoorbeeld op een knop Quickview klikt.
  • De website verzendt een Ajax-aanvraag naar de achterkant om de Quickview-gegevens of -inhoud te laden, indien nodig.
  • De Quickview-gegevens worden omgezet in de inhoud ter voorbereiding op de weergave op de webpagina.
  • Tot slot geeft de front-end code dergelijke inhoud visueel op het scherm terug.

Daarom is het verstandig verschillende gebieden van uw bestaande website te bezoeken waar QuickView is geïmplementeerd, de QuickView te activeren en de Ajax-URL vast te leggen die door de webpagina is verzonden voor het laden van de gegevens of inhoud van de QuickView.

Normaal is er geen behoefte aan u om het even welke gespecialiseerde het zuiveren hulpmiddelen te gebruiken. Moderne webbrowsers beschikken over webinspecteurs die hun werk naar behoren doen. Hieronder volgen enkele voorbeelden van webbrowsers met webcontroles:

  • Als u alle uitgaande HTTP-aanvragen in Google Chrome wilt weergeven, gebruikt u de sneltoets F12 (Windows) of Command + Options + I (Mac) om het venster Developer Tools te openen en klikt u op het tabblad Network.

  • In Mozilla Firefox kunt u de Firebug-plug-in activeren met de sneltoets F12 (Windows) of Command + Options + I (Mac) en de tab Net gebruiken. U kunt ook het ingebouwde controllergereedschap en de tab Netwerk gebruiken.

  • Activeer in Internet Explorer het foutopsporingsprogramma door op F12 te drukken.

Wanneer netwerkcontrole in browser wordt aangezet, teweeg de Snelle mening op de pagina.

Zoek nu de URL van Quickview Ajax in het netwerklogboek en kopieer de geregistreerde URL voor toekomstige analyse. Gewoonlijk, wanneer u de Quickview teweegbrengt zijn er talrijke verzoeken die naar de server worden verzonden. De URL van Quickview Ajax is doorgaans een van de eerste in de lijst. Het heeft of een complex gedeelte van het vraagkoord of weg, en zijn reactieMIME type of text/html, text/xml, of text/javascript is.

Tijdens dit proces is het belangrijk om verschillende delen van uw website te bezoeken, met verschillende productcategorieën en typen. De reden hiervoor is dat URL's in de Snelle weergave onderdelen kunnen bevatten die algemeen gelden voor een bepaalde categorie websites, maar deze alleen wijzigen als u een ander gedeelte van de website bezoekt.

In het eenvoudigste geval, is het enige veranderlijke deel in Quickview URL productSKU. In dit geval is de product-SKU-waarde het enige gegevensstuk dat nodig is om miniaturen toe te voegen aan een tijdsegment in de interactieve video in Experience Manager.

In complexe gevallen heeft de URL van de Snelle weergave echter andere variërende elementen naast de SKU van het product, zoals categorie-id en kleurcode. In dergelijke gevallen wordt elk element van deze aard een aparte variabele in de definitie van miniatuurgegevens in de Experience Manager.

Bekijk de volgende voorbeelden van URL's van QuickView en de bijbehorende miniatuurvariabelen:

Enige SKU, die in het vraagkoord wordt gevonden.

De opgenomen URL's van de Snelle weergave bevatten het volgende:

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

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

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

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

Het enige variabele deel in URL is de waarde van productId= de parameter van het vraagkoord, en het is duidelijk een waarde SKU. Daarom hebben de duimnagels slechts gebieden SKU met waarden zoals 866558, 1196184, 1081492, 1898294 nodig.

Eén SKU, gevonden in het URL-pad.

De opgenomen URL's van de Snelle weergave bevatten het volgende:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

Het variabele gedeelte bevindt zich in het laatste gedeelte van het pad en wordt de SKU-waarde van miniaturen van Experience Managers: 6422350843, 1607745002, 0086724882.

SKU en categorie-id in de queryreeks.

De opgenomen URL's van de Snelle weergave bevatten het volgende:

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

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

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

In dit geval bevat de URL twee verschillende onderdelen. De SKU wordt opgeslagen in de prodId parameter en categorie ID wordt opgeslagen in de category= parameter.

Daarom zijn de miniatuurdefinities paren. Dat wil zeggen, een SKU-waarde en een extra variabele met de naam categoryId. De resulterende paren zijn:

  • SKU is 305466 en categoryId is 1100004
  • SKU is 310181 en categoryId is 1100004
  • SKU is 308706 en categoryId is 1740148

Voorbeeld

Wanneer de bovenstaande benadering wordt toegepast op de website van het Voorbeeld, hebt u een Web-pagina met verscheidene productduimnagels, elk met een SEE MORE knoop:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=nl-NL?lang=nl-NL

Nadat u alle Quickviews van het product beschikbaar op de pagina activeert, krijgt u de volgende lijst van verzoeken die van de Snelle mening aan het achterste eind worden gemaakt:

  • 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

Wanneer u de serveraanroepen bekijkt, ziet u dat productspecifieke informatie alleen aanwezig is in het aanvraagpad. U merkt ook dat het vraagkoord helemaal niet wordt gebruikt, en er zijn twee verschillende types van gegevensstukken in kwestie:

  • Het eerste type is kaarsen, kussens, meubelen en glaswerk. Je kunt deze 'productcategorie' noemen.
  • Het tweede type is productcode, zoals 233916597. Je kan aannemen dat het "product SKU" is.

Op basis van deze informatie heeft de volledige URL van de Snelle weergave het volgende patroon:

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

Op basis van deze analyse concludeert u dat u de volgende twee variabelen kunt gebruiken voor de miniaturen: categoryId en SKU.

U kunt nu een video en de bijbehorende miniatuurelementen uploaden.

(Optioneel) Een voorinstelling voor een interactieve videoviewer maken

U kunt deze taak overslaan en verdergaan naar de volgende taak als u van plan bent een van de standaard, out-of-the-box Interactive Video viewer vooraf ingestelde types te gebruiken die als Shoppable_Video_dark of Shoppable_Video_light worden bekend.

Wanneer op een miniatuur wordt geklikt in de ontwerpomgeving, wordt een voorbeeld van het dialoogvenster Quickview weergegeven.

chlimage_1-127

U kunt desgewenst uw eigen aangepaste voorinstelling voor een interactieve videoviewer maken. U kunt onder andere de opmaak bepalen van de videospeler, de interactieve miniaturen en de weergave van het miniatuurraster die aan het einde van de video wordt weergegeven.

Een voorinstelling voor een interactieve videoviewer geeft de video en alle tijdlijnsegmenten die u hebt toegevoegd correct weer. Er wordt ook een voorbeeld van standaard QuickView gebruikt wanneer u op een productminiatuur klikt in de modus Preview, zodat u de interactiviteit kunt testen voordat u publiceert.

Nadat u de viewervoorinstelling hebt opgeslagen, wordt de status ervan automatisch ingesteld op On op de pagina Viewer Presets. Deze status betekent dat deze zichtbaar is in de component Dynamische media en wanneer u een voorvertoning van een video weergeeft. Zorg ervoor dat u de nieuwe viewervoorinstelling ook handmatig publiceert.

Zie Een nieuwe voorinstelling voor de viewer maken om uw eigen voorinstelling voor de interactieve videoviewer te maken.

Een video en de bijbehorende miniatuurelementen uploaden

Als u de video en miniatuurelementen al hebt geüpload, gaat u verder naar Interactiviteit toevoegen aan uw video.

Als u de verkeerde video's of afbeeldingen hebt geüpload of als u geüploade video's of afbeeldingen wilt verwijderen die u niet meer nodig hebt, raadpleegt u Elementen verwijderen.

Een video en de bijbehorende miniatuurelementen uploaden:

  1. Upload de video en de bijbehorende miniatuurbestanden naar de gewenste map of mappen.

    Zie Elementen uploaden.

    Zie Elementen uploaden met FTP-taakplanning.

    Voeg nu interactiviteit toe aan uw video.

Interactiviteit toevoegen aan uw video

U voegt tijdlijnsegmenten aan een video toe met de lokale visuele editor op de pagina Interactieve video maken.

Nadat u tijdlijnsegmenten hebt toegevoegd, voegt u miniatuurafbeeldingen toe binnen elk segment. Voor elke miniatuur die u toevoegt, past u er een actie op toe. U kunt bijvoorbeeld een Snelle weergave toepassen op de miniatuur, u kunt er een hyperlink aan toewijzen of u kunt een Experience-fragment toevoegen.

Zie Fragmenten ervaren.

OPMERKING

De op URL gebaseerde methode van het verbinden is niet mogelijk als uw interactieve inhoud verbindingen met relatieve URLs, in het bijzonder verbindingen met de pagina's van de Plaatsen van de Experience Manager heeft.

Undo en Redo opties worden in de rechterbovenhoek van de pagina ondersteund tijdens de huidige sessie voor maken en bewerken.

Nadat u de interactieve video hebt opgeslagen, wordt de video direct geopend in Voorvertoning. Van daaruit kunt u een voorinstelling voor een interactieve videoviewer selecteren en de video afspelen om bij benadering te zien hoe deze er voor klanten uitziet.

Om interactiviteit aan uw video toe te voegen:

  1. Navigeer in de weergave Elementen naar de video die u hebt geüpload en maak een interactieve video.

  2. Voer een van de volgende handelingen uit:

    • Tik op Select (vinkpictogram) op de afbeelding. Tik op Edit op de werkbalk.
    • Tik op More actions (drie punten) > Edit.
    • Tik op de afbeelding zodat u deze kunt openen op de pagina Gedetailleerde weergave. Tik op Edit op de werkbalk.
  3. Voer op de pagina Create Interactive Video een van de volgende handelingen uit:

    • Tik op de knop Play zodat u de video kunt afspelen. Tik op Add Segment op de werkbalk wanneer een bepaald product, een bepaalde service of een bepaald detail dat u wilt markeren, in beeld komt. Herhaal deze bewerking totdat u het einde van de video hebt bereikt.

      Voor elk tijdsegment dat u toevoegt, wijst u een of meer miniatuurafbeeldingen toe en koppelt u deze miniaturen aan de productpagina's van de Snelle weergave die klanten kunnen aanschaffen of aan webpagina's voor meer informatie.

    • Tik op de knop Play zodat u de video kunt afspelen. Tik op Pause wanneer een bepaald product, een bepaalde service of een bepaald detail dat u wilt markeren in beeld komt. Tik op Add Segment.

      Ga door met het afspelen en pauzeren van de video op punten langs de tijdlijn waar u een segment wilt toevoegen totdat u het einde van de video hebt bereikt.

  4. (Optioneel) Sleep de balk op de Timeline Scale Slider naar links om in te zoomen of naar rechts om uit te zoomen. Op deze manier bepaalt u hoeveel details u ziet van de toegevoegde segmenten.

    chlimage_1-128

    Afhankelijk van de lengte van uw video, Segment Duration gebreken aan de volgende waarden:

    Als de videolengte... De instelling voor Duur segment is standaard ingesteld op...
    3 minuten of meer 60 seconden
    2-3 minuten 30 seconden
    1-2 minuten 20 seconden
    30-60 seconden 10 seconden
    30 seconden of minder 5 seconden

    De videotijdlijn gebruikt evenveel schermruimte als de ruimte die er beschikbaar voor is. Wanneer u de grootte van de browser wijzigt, behouden de segmenten die u hebt toegevoegd de juiste breedte.

    Ter illustratie gebruiken de volgende drie schermafbeeldingen dezelfde video. U ziet dat de breedte van elk segment afhankelijk van de instelling Timeline Scale verandert.

    chlimage_1-129

    Schermafbeelding A

    Screenshot A hierboven toont u de standaardweergave van een 29-secondenproductvideo. Timeline Scale wordt geplaatst bij het gebrek van 5 seconden.

    chlimage_1-130

    Schermafbeelding B

    In bovenstaande screenshot B werd de schuifregelaar Timeline Scale van de standaardwaarde van 5 seconden naar 3 seconden gesleept. De afzonderlijke tijdstempels Timeline Scale worden nu allemaal ingesteld met intervallen van 3 seconden.

    chlimage_1-131

    Screenshot C

    In Screenshot C hierboven werd de Timeline Scale-instelling verplaatst naar 8 seconden. U ziet hoe de segmenten met productminiaturen zijn verkleind. Op deze manier uitzoomen is handig als u een lange video hebt en u een overzicht wilt kunnen zien van meer segmenten die normaal gesproken in de breedte van de pagina passen.

  5. (Optioneel) Voer een van de volgende handelingen uit:

    • De begintijd en eindtijd van een segment aanpassen.

      Selecteer een segment en sleep vervolgens de voorloopblauwe of navolgende blauwe ovaal om respectievelijk de begin- of eindtijd aan te passen. Het weergegeven videoframe wordt op basis van uw aanpassingen naar de juiste tijd in de video verplaatst. De verplaatsing van het tijdlijnsegment wordt beperkt op basis van eventuele aangrenzende segmenten in de tijdlijn. De minimaal toegestane segmenttijd is één seconde.

      Gebruik de volgende sneltoetsen voor navigatie om uw videosegmenten snel te controleren en af te stemmen:

      • Tik op de blauwe ovaal vóór de rand als u de video rechtstreeks naar het begin van dat segment wilt zoeken.
      • Tik op de navolgende blauwe ovaal als u de video rechtstreeks naar het einde van dat segment wilt zoeken.
      • Tik op het hele segment als u de video wilt afspelen naar het begin van dat segment

    chlimage_1-132

    Het einde van een tijdlijnsegment verplaatsen

    • Een segment verwijderen

      Selecteer het laatste segment dat zich op de tijdlijn bevindt en tik op Delete Segment op de werkbalk. Als twee of meer segmenten zijn geselecteerd, wordt de functie Delete Segment uitgeschakeld.

      U kunt alleen het laatste segment verwijderen. Als u bijvoorbeeld alle segmenten op de tijdlijn wilt verwijderen, moet u altijd de laatste selecteren en vervolgens op Delete Segment tikken.

  6. Selecteer een tijdsegment waaraan u een of meer miniatuurafbeeldingen wilt koppelen.

  7. Tik rechts van de video op het tabblad Content.

  8. Tik op Content onder het tabblad Select Assets, blader en selecteer alle afbeeldingselementen die u voor de video wilt gebruiken. De geselecteerde elementen worden toegevoegd aan het Asset Selector-deelvenster op het tabblad Content.

  9. Voer een van de volgende handelingen uit in de elementkiezer onder het tabblad Inhoud:

    Een miniatuur koppelen aan het geselecteerde tijdlijnsegment

    Tik op de afbeelding in het deelvenster met middelenkiezers aan de rechterkant.

    U kunt zoveel miniaturen toevoegen als u wilt aan een tijdlijnsegment. Voor elke afbeelding die u selecteert, verschijnt een vinkje boven de afbeelding in de elementenkiezer.

    Een miniatuur verwijderen uit het geselecteerde tijdlijnsegment

    Voer een van de volgende handelingen uit:

    • Tik in het deelvenster met middelenkiezers op een afbeelding met een vinkje om de selectie ervan op te heffen. Het afbeeldingselement wordt verwijderd uit het tijdlijnsegment.
    • Tik in het geselecteerde tijdlijnsegment op een afbeelding en tik vervolgens op de werkbalk op Product verwijderen.

    Elementkiezer

    Tik op een afbeelding in het deelvenster met middelenkiezers om deze toe te voegen aan het geselecteerde tijdlijnsegment.

  10. Selecteer één miniatuurafbeelding binnen een van de tijdlijnsegmenten en tik op het tabblad Actions.

  11. Voer een van de volgende handelingen uit:

    <>
    De geselecteerde miniatuurafbeelding aan een Snelle weergave koppelen

    Tik onder Type handeling op QuickView.

    Als u een klant van de Plaatsen van de Experience Manager en van de Handel bent:

    • U ziet dat het tekstveld SKU-waarde vooraf is ingevuld met de SKU (Stock Keeping Unit) van het geselecteerde product. Dit is een unieke id voor elk afzonderlijk product of elke service die u aanbiedt. Dit veld wordt automatisch ingevuld wanneer de afbeelding is gekoppeld aan een product in Experience Manager Commerce.
    • Als de vooraf ingevulde SKU onjuist is, tikt u op het pictogram Productkiezer (vergrootglas) of klikt u op dit pictogram om de pagina Selecteer product te openen. Tik of klik op het product dat u wilt gebruiken en tik vervolgens op het vinkje in de rechterbovenhoek van de pagina, zodat u terug kunt keren naar de Interactieve video-editor.

    Als u not een Plaats van de Experience Manager of een klant van de Handel bent

    • Zie Hotspot-variabelen identificeren. U moet deze variabelen definiëren.
    • Standaard gebruikt dit SKU-veld de bestandsnaam van het afbeeldingselement zonder de extensie. Als u een standaardnaamgevingsconventie volgt voor uw bestanden die op SKU zijn gebaseerd, vereisen de bestanden gewoonlijk geen aanvullende bewerkingen.
    • Anders, geef de standaardwaarde uit en ga de correcte waarde SKU in. Typ in het tekstveld SKU-waarde de SKU (Stock Keeping Unit) van het product. Dit is een unieke id voor elk afzonderlijk product of elke service die u aanbiedt. De ingegaan waarde van SKU bevolkt automatisch het veranderlijke gedeelte van het malplaatje van de Snelle mening zodat het systeem weet om het in kaart gebrachte beeld met de Snelle mening van SKU te associëren.

    (Optioneel) Tik op Algemene variabele toevoegen als er andere variabelen in de Snelle weergave zijn die u moet gebruiken om een product nader te identificeren. Geef in het tekstveld een extra variabele op. category=Womens is bijvoorbeeld een toegevoegde variabele.

    De geselecteerde miniatuurafbeelding aan een hyperlink koppelen

    Tik onder Type handeling op Hyperlink en voer een van de volgende handelingen uit:

    • Als u een klant van de Plaatsen van de Experience Manager bent, tik het pictogram van de Selecteur van de Plaats (omslag) om aan een webpagina te navigeren. De op URL gebaseerde methode van het verbinden is niet mogelijk als uw interactieve inhoud verbindingen met relatieve URLs, in het bijzonder verbindingen met de pagina's van de Plaatsen van de Experience Manager heeft.
    • Als u een zelfstandige Dynamic Media-klant bent, geeft u in het tekstveld HREF het volledige URL-pad naar een gekoppelde webpagina op.

    Zorg ervoor dat u opgeeft of u de koppeling wilt openen op een nieuw browsertabblad of op het huidige tabblad.

    De geselecteerde miniatuurafbeelding aan een ervaringsfragment koppelen

    Tik onder Type handeling op Fragment ervaren en voer de volgende handelingen uit:

    • Als u een klant van de Plaatsen van de Experience Manager bent, tik of klik het pictogram van het Onderzoek (vergrootglas) om de pagina van het Fragment van de Ervaring te openen. Tik op het gewenste fragment voor beleving of klik op het gewenste fragment. Tik vervolgens op Selecteer rechtsboven op de pagina, zodat u terug kunt keren naar het deelvenster Handelingen op de vorige pagina.
      Zie Fragmenten ervaren.
    • Geef de breedte en hoogte van het ervaringsfragment op zoals dit in de video wordt weergegeven.
    Opmerking: De gereedschappen voor het delen van sociale media in interactieve video worden niet ondersteund wanneer u de viewer insluit in een ervaringsfragment. Om dit probleem te verhelpen, kunt u voorinstellingen voor viewers gebruiken of maken die geen gereedschappen voor het delen van sociale media hebben. Met dergelijke voorinstellingen voor viewers kunt u de voorinstelling met succes insluiten in Experience Fragments.

    Een handeling bewerken die al is toegewezen aan een miniatuurafbeelding Tik binnen een tijdlijnsegment op een miniatuurafbeelding met een kettingkoppeling rechts van het tekstlabel. De kettingkoppeling geeft aan dat er een handeling aan is toegewezen. Tik op het tabblad Handelingen zodat u de wijzigingen kunt aanbrengen.
    Het tekstlabel van een miniatuurafbeelding wijzigen

    Standaard gebruikt het tekstlabel het metagegevensveld Title van de miniatuurafbeelding. Als Title niet aanwezig is, wordt in plaats daarvan de bestandsnaam van de miniatuurafbeelding gebruikt, maar zonder de extensie.

    Als u het tekstlabel van een miniatuurafbeelding wilt wijzigen, typt u de gewenste tekst onder het tabblad Handelingen direct onder het afbeeldingselement dat wordt weergegeven. Zie de onderstaande schermafbeelding.

    Het nieuwe tekstlabel wordt alleen gebruikt door de videospeler zelf en de miniatuurtekst die in het tijdlijnsegment wordt weergegeven. De labelwijziging heeft geen invloed op het metagegevensveld Titel van de miniatuurafbeelding en de bestandsnaam van de miniatuurafbeelding.

    Als u een aangebrachte wijziging wilt herstellen, Tik in de rechterbovenhoek van de pagina op Ongedaan maken of Opnieuw.

    experienceExtension_interactivevideo's

    Er wordt een nieuw tekstlabel toegevoegd aan de miniatuurafbeelding.

  12. Voer een van de volgende handelingen uit:

    • Herhaal stap 6-11 om meer miniatuurafbeeldingen toe te voegen aan tijdlijnsegmenten in uw video.
    • Ga verder met de optionele stap 13.
  13. (Optioneel) Voer een van de volgende handelingen uit:

    • Merge Segment - U kunt twee aangrenzende segmenten (met of zonder productminiaturen aan hen toegewezen) in één segment combineren.

      Tik in de tijdlijn op twee of meer aangrenzende segmenten die u wilt samenvoegen. Er zijn geen blauwe, ovale sleepgrepen op de twee geselecteerde segmenten in de onderstaande schermafbeelding.

      Tik Merge Segment op de werkbalk.
      chlimage_1-134

    Twee geselecteerde segmenten van vijf seconden samenvoegen tot één segment van tien seconden.

    • Split Segment - U kunt één segment opsplitsen in twee segmenten met gelijke tijdnotatie. Als er al productminiaturen aan het segment zijn toegewezen, worden de miniaturen gecombineerd in het linkersegment.

      Tik op de tijdlijn op een segment dat u in tweeën wilt delen en tik op Split Segment op de werkbalk.

      Als u twee of meer segmenten selecteert, wordt de functie Split Segment uitgeschakeld.
      chlimage_1-135

    Een geselecteerd segment van tien seconden opsplitsen in twee segmenten van vijf seconden elk.

  14. In de rechterbovenhoek van de pagina Create Interactive Video wordt de naam weergegeven van de momenteel geselecteerde viewer-voorinstelling die bij de video wordt gebruikt. Tik op de naam als u een andere viewer-voorinstelling wilt selecteren.

    Met de voorinstelling Shoppable_Video_light kunt u bijvoorbeeld de video afspelen met een wit weergavegebied naast de video. In het weergavegebied worden de aanklikbare miniatuurafbeeldingen tijdens het afspelen weergegeven. Met de voorinstelling Shoppable_Video_dark kunt u de video afspelen met een zwart weergavegebied naast de video.

    Als u uw eigen voorinstelling voor de interactieve videoviewer hebt gemaakt, wordt deze ook weergegeven in de lijst met voorinstellingen waaruit u kunt kiezen.

    Tik Save als u klaar bent.

    OPMERKING

    Wanneer u uw interactieve video opslaat, wordt er automatisch een gekoppeld .vtt-bestand bij opgeslagen. Het .vtt-bestand wordt opgeslagen in de map _VTT in de hoofdmap van Assets. Uw interactieve video kan alleen correct worden afgespeeld op uw website als het bestand en de map aanwezig zijn. Verplaats, bewerk of verwijder daarom de map _VTT of de content ervan niet.

  15. Publiceer de interactieve video. Met Publiceren maakt u de insluitcode of URL die u uiteindelijk kopieert en plakt naar uw website.

    Als u interactiviteit met Snelle meningen toevoegde, gebruik slechts de ingebedcode; Als u interactiviteit hebt toegevoegd aan hypergekoppelde webpagina's, kunt u ook de gepubliceerde URL gebruiken. De op URL gebaseerde methode voor koppelen is echter niet mogelijk als uw interactieve inhoud koppelingen naar relatieve URL's bevat, met name koppelingen naar pagina's met Experience Managers Sites.

    Zie Elementen publiceren.

    OPMERKING

    Als u een schokkende video met Quickviews wilt publiceren, moet u ook elk van de verwante afbeeldingselementen van de video afzonderlijk publiceren vanuit uw handelsgebied.

    Nadat u tijdlijnsegmenten hebt toegevoegd en de interactieve video hebt gepubliceerd, kunt u deze toevoegen aan de openingspagina van uw bestaande website. Zie Een interactieve video integreren met uw website.

Interactieve video-elementen publiceren

Zie Elementen publiceren voor meer informatie over het publiceren van interactieve video-elementen.

Een interactieve video integreren met uw website

Nadat u een video hebt geüpload, tijdlijnsegmenten hebt toegevoegd en de interactieve video hebt gepubliceerd, kunt u deze nu toevoegen aan uw bestaande website.

Als u een klant van de Plaatsen van de Experience Manager bent, kunt u de interactieve video toevoegen door de Interactieve component van Media aan uw pagina te slepen. Zie Dynamic Media-elementen toevoegen aan pagina's.

Als u een zelfstandige klant van de Middelen van de Experience Manager bent, kunt u de interactieve video aan uw website manueel toevoegen zoals die in deze sectie wordt beschreven.

Een interactieve video integreren met uw website:

  1. Kopieer de insluitcode of URL van de gepubliceerde interactieve video.

    Zie Video- of afbeeldingsviewer insluiten op een webpagina.

    Als u interactiviteit met Snelle meningen toevoegde, gebruik slechts de ingebedcode; Als u interactiviteit hebt toegevoegd aan hypergekoppelde webpagina's, kunt u ook de gepubliceerde URL gebruiken. De op URL gebaseerde methode voor koppelen is echter niet mogelijk als uw interactieve inhoud koppelingen naar relatieve URL's bevat, met name koppelingen naar pagina's met Experience Managers Sites.

  2. Geef in de webpaginacode van het doel aan waar de statische video zich bevindt.

  3. Verwijder de statische video en vervang de code door de insluitcode of URL die u uit de Elementen van de Experience Manager hebt gekopieerd.

    De gekopieerde insluitcode wordt ingesteld voor een responsieve omgeving, zodat deze automatisch past in het gebied dat eerder door de statische video werd ingenomen.

OPMERKING

Als u nu alleen interactiviteit met hypergekoppelde webpagina's hebt toegevoegd, bent u klaar.
Als u echter interactiviteit hebt toegevoegd om een Snelle weergave te activeren, gelden de miniaturen naast de interactieve video alleen voor weergavedoeleinden. ze zijn nog niet geïntegreerd met uw bestaande QuickView. In dat geval moet u de interactieve video nu integreren met bestaande QuickView op uw website.

Voorbeeld

De demo-website als voorbeeld gebruiken:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=nl-NL?lang=nl-NL

U ziet hoe het standaard video-insluitcode is:

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

Integratie is zo eenvoudig als het verwijderen van de video-insluitcode en het vervangen van deze code door de interactieve video-insluitcode uit de Experience Manager. U kunt het resultaat op de volgende URL zien. Hoewel er een interactieve video op de pagina wordt weergegeven, is deze nog niet geïntegreerd met de bestaande QuickView:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-1.html?lang=nl-NL?lang=nl-NL

Een interactieve video integreren met een bestaande QuickView

OPMERKING

Deze taak is slechts van toepassing als u een stand-alone klant van de Activa van de Experience Manager bent.

De laatste stap in dit proces is uw interactieve video te integreren met een bestaande implementatie van de Snelle mening die op uw website wordt gebruikt. Er is geen oplossing voor de integratie die in alle gevallen werkt. Elke Quickview-implementatie is uniek. Daarom is een specifieke aanpak nodig waarbij een front-end IT-persoon wordt bijgestaan.

De bestaande implementatie van QuickView vertegenwoordigt normaal gesproken een reeks onderling samenhangende acties die op de webpagina in de volgende volgorde plaatsvinden:

  1. Een gebruiker activeert een element in de gebruikersinterface van uw website.
  2. De front-end code verkrijgt een Quickview URL die op het gebruikersinterface element wordt gebaseerd dat in stap 1 werd teweeggebracht.
  3. De front-end code verzendt een AJAX verzoek gebruikend URL die in stap 2 wordt verkregen.
  4. De achterste logica keert de overeenkomstige gegevens of inhoud van de Snelle mening terug naar de front-end code.
  5. De front-end code laadt de gegevens of de inhoud van de Snelle mening.
  6. Naar keuze, zet de front-end code de geladen gegevens van de Snelle mening in een vertegenwoordiging van HTML om.
  7. De front-end code geeft een modaal dialoogvenster of deelvenster weer en geeft de HTML-inhoud op het scherm weer voor de eindgebruiker.

Deze vraag kan onafhankelijke openbare API vraag niet vertegenwoordigen die door de Webpaginalogica van een willekeurige stap kan worden geroepen. In plaats daarvan, is het een geketende vraag waar elke volgende stap in de laatste fase (callback) van de vorige stap verborgen is.

Wanneer een gebruiker op een miniatuur in de interactieve video klikt en tegelijkertijd de interactieve video stap 1 en gedeeltelijk stap 2 vervangt, wordt deze gebruikersinteractie door de viewer afgehandeld. De viewer retourneert een gebeurtenis naar de webpagina die alle miniatuurgegevens bevat die eerder aan de Experience Manager zijn toegevoegd.

In een dergelijke gebeurtenishandler doet de front-end code het volgende:

  • Luistert naar een gebeurtenis die wordt uitgezonden door de interactieve video.
  • Hiermee maakt u een URL van de Snelle weergave op basis van de miniatuurgegevens.
  • Triggert het proces om de Snelle mening van het achtereind te laden en het terug te geven op het scherm voor vertoning.

Bovendien ondersteunt de Interactieve Video-viewer de modus Volledig scherm. De eindgebruiker activeert QuickView door op een miniatuur te klikken zonder het volledige scherm te verlaten. Om deze functionaliteit te bereiken, wijzigt u de front-end code zodat het modale dialoogvenster van de Snelle weergave aan de container van de kijker wordt vastgemaakt. Voeg geen BODY van het document of een ander Webpagina-element toe dat niet beschikbaar is wanneer de kijker op volledig-schermwijze is. De code die deze taak uitvoert, luistert naar een andere viewer-callback die wordt verzonden nadat de viewer op de pagina is geladen.

De insluitcode die door Experience Manager wordt geretourneerd, heeft al een gebruiksklare gebeurtenishandler. Er wordt opmerkingen toegevoegd zoals in het volgende gemarkeerde codefragment wordt getoond:

<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 quickview.
   s7interactivevideoviewer.setHandlers({ 
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
    //To pass other parameter from the hotspot, you 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 quickview 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 quickview container to viewer
    } 
   });
 */
 s7interactivevideoviewer.init();
</script>

Het is dus alleen nodig de commentaarmarkering van het gemarkeerde codefragment hierboven ongedaan te maken en de dummy-handlers te vervangen door code die specifiek is voor de specifieke webpagina.

Er zijn twee standaardcallback managers aanwezig in de standaard insluitcode: quickViewActivate en initComplete. De handler quickViewActivate wordt geactiveerd wanneer op een miniatuur wordt geklikt in de viewer. Gebruik deze optie om de viewer te integreren met de activeringslogica van de Snelle weergave. De handler initComplete wordt slechts één keer geactiveerd wanneer de viewer op de pagina wordt geladen. Deze handler wordt gebruikt om de locatie van het dialoogvenster QuickView in het DOM van de webpagina aan te passen.

Het proces om QuickView URL te construeren is tegengesteld aan het proces om duimnagelvariabelen te identificeren die vroeger in dit onderwerp worden behandeld. Met behulp van de eerder geïdentificeerde URL-voorbeelden van QuickView kunt u zien hoe de URL van de Snelle weergave in elk geval wordt samengesteld:

Single SKU, gevonden in het vraagkoord

s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
Enkele SKU, gevonden in het pad URL s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });

SKU en categorie-id in de queryreeks

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

De laatste stap om de Quickview URL teweeg te brengen en het paneel van de Snelle mening te activeren vereist hoogstwaarschijnlijk de hulp van een front-end persoon van IT van uw afdeling van IT. Zij hebben de kennis om het best te weten hoe te om de implementatie van de Snelle mening van de juiste stap nauwkeurig teweeg te brengen, die een klaar-aan-gebruiksKickview URL hebben.

U kunt zien hoe deze stappen worden toegepast op de demo-website om een interactieve video volledig te integreren met de Quickview-code. Eerder in dit onderwerp, werd de structuur van Snelle mening URL geïdentificeerd als het volgende:

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

Het is eenvoudig om deze URL binnen de quickViewActivate manager te reconstrueren gebruikend categoryId en sku gebieden beschikbaar in het inData voorwerp dat tot de manager door middel van de code van de kijker als in het volgende wordt overgegaan:

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

De demowebsite activeert het dialoogvenster Snelle weergave met een eenvoudige functieaanroep loadQuickView(). Deze functie heeft slechts één argument, namelijk de gegevens-URL van de Snelle weergave. De laatste stap bestaat uit het integreren van de interactieve video door de volgende coderegel toe te voegen aan de quickViewActivate-handler:

loadQuickView(quickViewUrl);

Ten slotte moet het dialoogvenster Quickview zijn gekoppeld aan het containerelement van de viewer. De standaard insluitcode bevat voorbeeldstappen om deze functionaliteit te bereiken. Als u een verwijzing naar het containerelement van de viewer wilt verkrijgen, kunt u de volgende coderegels gebruiken:

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

Hierbij is inner_container een verwijzing naar een DIV-element dat door de viewer wordt beheerd. U wilt dat het dialoogvenster een onderliggend item is van dat DIV.

De stappen om het element van het modale dialoogvenster daadwerkelijk te vinden en aan de bovenstaande container te koppelen, zijn specifiek voor hoofdletters en kleine letters. Opnieuw, kunt u de hulp van uw front-end ontwikkelaar zoeken die met uw implementatie vertrouwd is Quickview die nodig is.

Voor de voorbeeldwebsite wordt het modale dialoogvenster van de Snelle weergave geïmplementeerd als een DIV, waarbij de snelweergave-modale id direct aan het document is gekoppeld BODY. De code waarmee dat dialoogvenster naar de container van de viewer wordt verplaatst, is daarom even eenvoudig als de volgende code:

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

De volledige broncode ziet er als volgt uit:

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

De laatste demo-website met de volledig geïntegreerde interactieve video ziet er als volgt uit:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-3.html?lang=nl-NL?lang=nl-NL

Aangepaste pop-ups maken met Quickviews

Zie Aangepaste pop-ups maken met Quickviews.

Op deze pagina