Interactieve video's

U kunt eenvoudig interactieve video's maken, ook wel shoppable video's genoemd, die de conversie rechtstreeks vanaf de video stimuleren. 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 de miniatuur selecteren en rechtstreeks aan de service koppelen, of het item voor directe aankoop aan een winkelwagentje toevoegen of aan een webpagina koppelen 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 het gewenste item te selecteren. Handelbare en specifieke ervaringen zoals deze verhogen de betrokkenheid van klanten en conversies.

Zie ook Interactieve afbeeldingen.

Interactieve video in actie

Selecteer Live demo's, schuiven naar de Shoppable Media op de pagina en selecteer vervolgens de schokkende video.

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

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

Een frame van een interactieve, schokkende video Een videoframe dat wordt vastgelegd van een interactieve, schokkende video.

OPMERKING

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

Controleren hoe interactieve video's worden gemaakt

Doorloop afspelen ingeschakeld hoe interactieve video's worden gemaakt (7 minuten en 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-oplossingen voor klanten Webinar

De webinar ‘Interactive Video, Link Sharing en YouTube sharing gebruiken in Experience Manager Assets’ leert u hoe u interactieve video en andere functies kunt gebruiken om conversie-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 in enkele van de taken voor Snel starten. Het bevat een korte zelfstudie die is gebaseerd op deze webpagina van de startdemo die niet er nog interactiviteit aan toegevoegd hebben:

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

  1. (Optioneel) Quickview-variabelen identificeren - Begin door dynamische variabelen te identificeren die door uw bestaande implementatie worden gebruikt Quickview. U gebruikt de variabelen om productminiaturen toe te wijzen aan hun overeenkomstige productQuickView wanneer u uw interactieve video creeert. Zie (Optioneel) Quickview-variabelen identificeren.
    Deze stap is alleen vereist als aan alle volgende voorwaarden is voldaan:

    • U wilt interactiviteit aan uw video toevoegen door aan Snelle mening te teweegbrengen.
    • Uw implementatie van Experience Manager doet niet gebruik een eCommerce-integratieframework om productgegevens vanuit elke eCommerce-oplossing, zoals IBM® WebSphere® Commerce, Elastic Path, Hybris of Intershop, in de Experience Manager te krijgen. Zie Concepten van e-handel in Experience Manager Assets.
  2. (Optioneel) Een voorinstelling voor een interactieve videoviewer maken - Pas de weergave en het gedrag aan van 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 voor de externe interactieve videoviewer wilt gebruiken. Shoppable_Video_Light of Shoppable_Video_Dark in plaats daarvan.
    Zie Een voorinstelling voor viewers maken (facultatief) en Speciale overwegingen voor het maken van een voorinstelling voor een interactieve viewer.

  3. Een video en de bijbehorende afbeeldingselementen uploaden - Upload een video en de bijbehorende afbeeldingen die u interactief wilt maken.
    Zie Een video en de bijbehorende miniatuurelementen uploaden.

    OPMERKING

    De MXF-video-indeling wordt nog niet ondersteund voor gebruik met interactieve video's in Dynamic Media.

  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 Experience Manager Sites pagina's 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 toevoegen aan uw website of uw website in Experience Manager - Als u Experience Manager Sites, eCommerce of beide gebruikt, kunt u de interactieve video aan een webpagina toevoegen. Sleep de component Interactieve media naar de pagina in Experience Manager. 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.
    Dynamic Media-elementen toevoegen aan pagina's

(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 mening te teweegbrengen.
  • Uw implementatie van Experience Manager doet niet gebruik een eCommerce-integratieframework om productgegevens vanuit elke eCommerce-oplossing, zoals IBM® WebSphere® Commerce, Elastic Path, Hybris of Intershop, in de Experience Manager te krijgen. Zie Concepten van e-handel 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 de minimumreeks gegevens kennen om Snelle mening in het systeem te identificeren. Het is echter ook mogelijk om eenvoudig 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. Selecteer bijvoorbeeld een knop Snelle weergave.
  • 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:

  • Druk op F12 (Windows) of Command+Option+I (Mac) om het deelvenster Gereedschappen voor ontwikkelaars te openen en vervolgens het dialoogvenster Netwerk tab.

  • In Firefox kunt u de Firebug-plug-in activeren door op F12 (Windows) of Command+Option+I (Mac) en gebruikt [Net] of u kunt het ingebouwde hulpmiddel van de Inspecteur en zijn Netwerk tabel gebruiken.

  • Activeer in Internet Explorer het foutopsporingsprogramma door op F12.

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 Snelle mening 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 reactie MIME type is of text/html, text/xml, of text/javascript.

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 kunnen 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, kleurcode en code voor grootte. 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 gedeelte in de URL is de waarde van de productId= de parameter van het vraagkoord, en het is duidelijk een waarde SKU. Uw miniaturen hebben daarom alleen SKU-velden nodig die zijn gevuld met waarden zoals 866558, 1196184, 1081492, 1898294.

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. SKU wordt opgeslagen in prodId parameter en de categorie-id wordt opgeslagen in de category= parameter.

Daarom zijn de miniatuurdefinities paren. Namelijk een waarde SKU en een extra geroepen variabele 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 "ZIE MEER"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 productenQuickview activeert die op de pagina beschikbaar zijn, krijgt u de volgende lijst van verzoeken van de Snelle mening die 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 naar de volgende taak gaan als u van plan bent een van de standaardtypen van interactieve videoviewers te gebruiken die niet in de box staan Shoppable_Video_dark of Shoppable_Video_light.

Wanneer een miniatuur is geselecteerd in de ontwerpomgeving, wordt een voorbeeld van het dialoogvenster Snelle weergave weergegeven.

chlimage_1-21

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 een productminiatuur selecteert in de modus Voorbeeld, zodat u de interactiviteit kunt testen voordat u publiceert.

Nadat u de viewervoorinstelling hebt opgeslagen, wordt de status ervan automatisch ingesteld op Aan op de pagina Voorinstellingen viewer. 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 viewers 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 met Interactiviteit toevoegen aan uw video.

OPMERKING

De MXF-video-indeling wordt nog niet ondersteund voor gebruik met interactieve video's in Dynamic Media.

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 Ervaar fragmenten.

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.

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 Experience Manager Sites pagina's heeft.

Opties voor Ongedaan maken en Opnieuw 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:

    • Houd de aanwijzer boven de afbeelding en selecteer vervolgens Select (vinkje). Selecteer op de werkbalk de optie Edit.

    • Houd de aanwijzer boven de afbeelding en selecteer vervolgens More actions (pictogram met drie punten) > Edit.

    • Selecteer de afbeelding zodat u deze kunt openen op de pagina Gedetailleerde weergave. Selecteer op de werkbalk de optie Edit.

  3. Voer op de pagina Interactieve video maken een van de volgende handelingen uit:

    • Selecteer de optie Play knop. Wanneer een bepaald product, de dienst, of een detail dat u wilt benadrukken in mening komt, uitgezocht Add Segment op de werkbalk. 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.

    • Selecteer de optie Play knop. Wanneer een bepaald product, de dienst, of een detail dat u wilt benadrukken in mening komt, uitgezocht Pause. Selecteer 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 links om in te zoomen of rechts om uit te zoomen, zodat u kunt bepalen hoeveel detail wordt gezien van de segmenten die u hebt toegevoegd.

    chlimage_1-22

    Afhankelijk van de lengte van uw video, blijft de Duur van het Segment aan de volgende waarden in gebreke:

    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. Als 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 is van de instelling voor de tijdlijnschaal.

    chlimage_1-23

    Schermafbeelding A

    Screenshot A hierboven toont u de standaardweergave van een 29-secondenproductvideo. De tijdlijnschaal wordt standaard ingesteld op 5 seconden.

    chlimage_1-130

    Schermafbeelding B

    In bovenstaande afbeelding B werd de schuifregelaar Tijdlijnschaal van de standaardduur van 5 seconden naar 3 seconden gesleept. De afzonderlijke tijdstempels voor de schaal van de tijdlijn zijn nu allemaal ingesteld op intervallen van 3 seconden.

    chlimage_1-25

    Screenshot C

    In bovenstaande screenshot C is de instelling voor Tijdlijnschaal 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:

      • Als u de video direct naar het begin van dat segment wilt zoeken, selecteert u het voorafgaande blauwe ovaal.
      • Als u de video direct naar het einde van dat segment wilt zoeken, selecteert u het navolgende blauwe ovaal.
      • Selecteer het gehele segment om het afspelen van video terug te zetten naar het begin van dat segment.

    chlimage_1-26

    Het einde van een tijdlijnsegment verplaatsen

    • Een segment verwijderen

      Selecteer het laatste segment op de tijdlijn en selecteer vervolgens op de werkbalk de optie Delete Segment. Als twee of meer segmenten zijn geselecteerd, is de functie Segment verwijderen 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 Delete Segment.

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

  7. Selecteer rechts van de video de optie Content tab.

  8. Selecteer op het tabblad Inhoud de optie Select Assets Blader vervolgens naar alle afbeeldingselementen die u voor de video wilt gebruiken en selecteer deze. De geselecteerde elementen worden toegevoegd aan het deelvenster Elementkiezer op het tabblad Inhoud.

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

    Een miniatuur koppelen aan het geselecteerde tijdlijnsegment

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

    • Selecteer in het deelvenster Elementen selecteren een afbeelding met een vinkje om de selectie ervan op te heffen. Het afbeeldingselement wordt verwijderd uit het tijdlijnsegment.
    • Selecteer in het geselecteerde tijdlijnsegment een afbeelding en selecteer vervolgens op de werkbalk de optie Product verwijderen.

    Elementkiezer

    Als u een afbeelding selecteert in het deelvenster met middelenkiezers, wordt deze aan het geselecteerde tijdlijnsegment toegevoegd.

  10. Selecteer één miniatuurafbeelding binnen een van de tijdlijnsegmenten en selecteer vervolgens de Actions tab.

  11. Voer een van de volgende handelingen uit:

    <
    De geselecteerde miniatuurafbeelding aan een Snelle weergave koppelen

    Selecteer onder Type handeling de optie QuickView.

    Als u een klant van Experience Manager Sites 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. Deze waarde wordt automatisch gevuld wanneer het beeld met een product in de Handel van de Experience Manager wordt geassocieerd.
    • Als de vooraf ingevulde SKU onjuist is, selecteert u het pictogram Productkiezer (vergrootglas) om de pagina Selecteer product te openen. Selecteer het product dat u wilt gebruiken en selecteer vervolgens het vinkje in de rechterbovenhoek van de pagina zodat u terug kunt keren naar de Interactieve Video-editor.

    Als u niet een Experience Manager Sites- of e-commerceklanten

    • Zie Hotspotvariabelen identificeren. De variabelen moeten worden gedefinieerd.
    • 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, hoeft u voor deze bestandsnaam gewoonlijk geen aanvullende bewerkingen uit te voeren.
    • 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 geselecteerde beeld met de Snelle mening van SKU te associëren.

    (Optioneel) Als de Snelle weergave andere variabelen bevat die u moet gebruiken om een product verder te identificeren, selecteert u Algemene variabele toevoegen. Geef in het tekstveld een extra variabele op. Bijvoorbeeld: category=Womens is een toegevoegde variabele.

    De geselecteerde miniatuurafbeelding aan een hyperlink koppelen

    Selecteer onder Type handeling de optie HyperlinkVoer vervolgens een van de volgende handelingen uit:

    • Als u een Experience Manager Sites-klant bent, selecteert u het pictogram Sitekiezer (map) om naar 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 Experience Manager Sites pagina's 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

    Selecteer onder Type handeling de optie Ervaar fragmentVoer vervolgens de volgende handelingen uit:

    • Als u een Experience Manager Sites-klant bent, selecteert u het zoekpictogram (vergrootglas) om de pagina Experience Fragment te openen. Selecteer het ervaringsfragment dat u wilt gebruiken en selecteer Selecteren in de rechterbovenhoek van de pagina, zodat u kunt terugkeren naar het deelvenster Handelingen op de vorige pagina.
      Zie Ervaar fragmenten.
    • Geef de breedte en hoogte van het ervaringsfragment op zoals u het wilt weergeven op de video.
    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 Selecteer binnen een tijdlijnsegment een miniatuurafbeelding met een kettingkoppeling rechts van het tekstlabel. De kettingkoppeling geeft aan dat er een handeling aan is toegewezen. Selecteer Handelingen zodat u uw wijzigingen kunt aanbrengen.
    Het tekstlabel van een miniatuurafbeelding wijzigen

    Standaard gebruikt het tekstlabel de miniatuurafbeelding Title metagegevensveld. Indien 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, onder de knop Handelingen , direct onder het afbeeldingselement dat wordt weergegeven, typt u de gewenste tekst. 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.

    Een wijziging herstellen: Selecteer in de rechterbovenhoek van de pagina de optie 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.

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

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

      Selecteer op de tijdlijn een segment dat u wilt delen in de helft en selecteer vervolgens Split Segment op de werkbalk.

      Als u twee of meer segmenten selecteert, wordt het dialoogvenster Split Segment gebruiken.
      chlimage_1-135

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

  14. In de rechterbovenhoek van het dialoogvenster Create Interactive Video wordt de naam weergegeven van de geselecteerde viewer-voorinstelling die bij de video wordt gebruikt. Selecteer de naam als u een andere viewervoorinstelling wilt selecteren.

    De Shoppable_Video_light Met de voorinstelling van de viewer kunt u de video afspelen met een wit weergavegebied naast de video. In het weergavegebied worden de selecteerbare miniatuurafbeeldingen tijdens het afspelen weergegeven. De Shoppable_Video_dark Met de voorinstelling van de viewer 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 weergegeven in de lijst met voorinstellingen waaruit u kunt kiezen.

    Als u klaar bent, selecteert u Save.

    OPMERKING

    Wanneer u uw interactieve video opslaat, wordt er automatisch een gekoppeld .vtt-bestand bij opgeslagen. De .vtt bestand wordt opgeslagen in de _VTT map 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 mening 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 Experience Manager Sites-pagina's.

    Zie Elementen publiceren.

    OPMERKING

    Als u een schokkbare video wilt publiceren met QuickView, 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 Experience Manager Sites-klant bent, kunt u de interactieve video toevoegen door de component Interactieve media naar de pagina te slepen. Zie Dynamic Media-elementen toevoegen aan pagina's.

Als u een zelfstandige Experience Manager Assets-klant bent, kunt u de interactieve video handmatig aan uw website toevoegen, zoals in deze sectie wordt beschreven.

  1. Kopieer de insluitcode of URL van de gepubliceerde interactieve video.
    Zie De video- of afbeeldingsviewer insluiten op een webpagina.
    Als u interactiviteit met Snelle mening 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 Experience Manager Sites-pagina's.

  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 net als Experience Manager Assets hebt gekopieerd.
    De gekopieerde insluitcode wordt ingesteld voor een responsieve omgeving, zodat deze automatisch past in het gebied dat eerder werd ingenomen door de statische video.

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

De insluitcode is standaard:

<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 Snelle weergave:

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 alleen van toepassing als u een zelfstandige Experience Manager Assets-klant 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 aanroepen vertegenwoordigen geen onafhankelijke openbare API-aanroepen die door de webpaginalogica kunnen worden aangeroepen vanuit een willekeurige stap. 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 een miniatuur selecteert, wordt deze gebruikersinteractie door de viewer afgehandeld terwijl de interactieve video stap 1 en gedeeltelijk stap 2 vervangt. 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 een duimnagel te selecteren 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, moet luisteren naar een of meer callbacks van de viewer die worden verzonden nadat de viewer die op de pagina laadt.

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 quickViewActivate De handler wordt geactiveerd wanneer een miniatuur is geselecteerd in de viewer. Gebruik deze optie om de viewer te integreren met de activeringslogica van de Snelle weergave. De initComplete De handler 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 gemakkelijk om deze URL binnen te reconstrueren quickViewActivate handler gebruiken categoryId en sku velden beschikbaar in het dialoogvenster inData object dat aan de handler wordt doorgegeven via de code van de viewer, zoals in het volgende voorbeeld:

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

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

loadQuickView(quickViewUrl);

Tot slot moet u ervoor zorgen dat het dialoogvenster QuickView is gekoppeld aan het containerelement van de viewer. Met de insluitcode met standaardinstellingen worden voorbeeldstappen uitgevoerd 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);

Wanneer inner_container is een verwijzing naar een DIV -element dat door de viewer wordt beheerd. U wilt dat het dialoogvenster een onderliggend item van dat dialoogvenster is 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.

Als u de voorbeeldwebsite gebruikt, wordt het modale dialoogvenster van de Snelle weergave geïmplementeerd als een DIV met de modale id voor de snelweergave die rechtstreeks 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 Snelle weergave

Zie Aangepaste pop-ups maken met Snelle weergave.

Op deze pagina