Interaktiva videoklipp interactive-videos

CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

Du kan enkelt skapa interaktiva videor som genererar konvertering direkt från videon. Kundens engagemang i videon äger rum i en panel bredvid videospelaren där relaterade tjänster, information eller produktminiatyrer rullas in i vyn baserat på vad som visas i videon. Kunderna kan trycka på miniatyrbilden och länkas direkt till tjänsten, lägga till artikeln i en kundvagn för direktköp eller länkas till en webbsida för mer information.

När videon är slut visas en visuell sammanfattning av alla erbjudanden för att skapa ett actionanrop. Kunderna har en annan möjlighet att trycka på det objekt de vill ha. Användbara och specifika upplevelser som dessa ökar kundernas engagemang och konverteringar.

Se även Interaktiva bilder.

Interaktiv video in action interactive-video-in-action

Om du vill se en interaktiv videoklipp i praktiken klickar du Live Demos, bläddra till Shoppable Media på sidan och klicka sedan på videon.

  • Under uppspelningen, när produkterna används i videon, visas den identiska produkten till höger som en miniatyrbild.

  • Klicka på miniatyrbilden om du vill pausa videon och öppna snabbvyn för produkten. Du kan till exempel klicka på miniatyrbilden Kitchenaid i videon om du vill se en 360-graders snurvvy av blandaren, eller zooma in om du vill se blandningsinformationen.

En bildruta från en interaktiv, köpbar video En videobildruta från en interaktiv, köpbar video.

NOTE
Om du skapar en interaktiv video för att starta en webbsida när en användare klickar på en miniatyrbild, kan vissa enheter förhindra att popup-webbsidan öppnas. I sådana fall måste du ändra inställningen för blockering av popup-fönster på enheten. På en Apple iPhone 6 trycker du till exempel på Settings > Safari > Blockera popup-fönster och sedan flytta kontrollen till Off. När du spelar upp en interaktiv video och klickar på en miniatyrbild blir du nu tillfrågad om du vill öppna popup-fönstret. Om du accepterar öppnas webbsidan.

Se hur interaktiva videor skapas watch-how-interactive-videos-are-created

Spela en genomgång på hur interaktiva videor skapas 🔗. (7 minuter och 30 sekunder) Även om videogenomgången är märkt med Assets on Demand gäller fortfarande principerna och stegen för Interactive Video i Adobe Experience Manager Assets.

Adobe Customer Success Webinar adobe-customer-success-webinar

Webbseminariet"Using Interactive Video, Link Sharing, and YouTube sharing in Experience Manager Assets" visar hur du använder interaktiv video och andra funktioner för att knyta konverteringsdrivna händelser till videomarknadsföringsmaterialet.

Snabbstart: Interaktiva videoklipp quick-start-interactive-videos

Följande steg-för-steg-beskrivning av arbetsflödet hjälper dig att komma igång snabbt med interaktiva videor i Dynamic Media.

Leta efter Exempel i vissa snabbstartsåtgärder. Den innehåller en kort självstudiekurs som bygger på den här startsidan för en demo som inte ännu har interaktivitet:

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

Exemplen visar hur du integrerar interaktiva videofilmer på en webbplats.

När du är klar med självstudiekursen i det sista exempelavsnittet ser den slutliga demowebbsidan med den helintegrerade interaktiva videon ut så här:

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

Interaktivt videoarbetsflöde:

  1. (Valfritt) Identifiera Quickview-variabler - Börja med att identifiera dynamiska variabler som används i den befintliga QuickView-implementeringen. Du använder variablerna för att mappa produktminiatyrbilder till deras motsvarande produkt-snabbvyn när du skapar en interaktiv video. Se (Valfritt) Identifiera Quickview-variabler.

    Det här steget krävs bara om alla följande är true:

    • Du vill lägga till interaktivitet i videon genom att aktivera snabbvyer.
    • Er implementering av Experience Manager gör not använda ett ramverk för e-handelsintegrering för att hämta produktdata till Experience Manager från alla e-handelslösningar som IBM® WebSphere® Commerce, Elastic Path, hybris och Intershop. Se e-handelskoncept i Experience Manager Assets.
  2. (Valfritt) Skapa en förinställning för Interactive Video Viewer - Anpassa utseendet och beteendet för olika komponenter som utgör spelaren, t.ex. videobandspelaren och de interaktiva miniatyrbilderna.

    Det är inte nödvändigt att skapa en egen förinställning för Interactive Video Viewer om du tänker använda förinställningarna för Interactive Video Viewer Shoppable_Video_Light eller Shoppable_Video_Dark i stället.
    Se Skapa en ny visningsförinställning (valfritt) och Specialöverväganden när du skapar en interaktiv visningsförinställning.

  3. Överföra en video och dess associerade bildresurser - Ladda upp en video och tillhörande bilder som du vill göra interaktiva.

    Se Överföra en video och dess tillhörande miniatyrbilder.

  4. Lägga till interaktivitet i videon - Lägg till ett eller flera tidssegment i videon. Associera sedan bildminiatyrer inom dessa tidssegment. Tilldela varje miniatyrbild till en åtgärd som en hyperlänk, en snabbvy eller ett Experience Fragment.

    (Den URL-baserade länkningsmetoden är inte möjlig om det interaktiva innehållet har länkar till relativa URL-adresser, särskilt länkar till Experience Manager Sites-sidor.)

    Slutför genom att publicera det interaktiva videomaterialet. Publicering skapar den inbäddningskod eller URL som du så småningom kopierar och använder på webbplatsens landningssida. Se Lägga till interaktivitet i videon.

    Se Publicera resurser.

  5. Lägga till en interaktiv video till din webbplats eller till din webbplats i Experience Manager

    Om du använder Experience Manager Sites, Experience Manager e-handel, eller båda, kan du lägga till den interaktiva videon direkt på en webbsida i Experience Manager genom att dra Interactive Media-komponenten till sidan. Se Lägga till Dynamic Media-resurser på sidor.

    Använd inbäddningskoden eller URL-adressen för att integrera interaktiv video med webbplatsupplevelserna. Se Integrera en interaktiv video med webbplatsen.

    Om du använder en WCM-fil (Web Content Manager) från tredje part måste du integrera den nya interaktiva videon med den befintliga QuickView-implementeringen som används på webbplatsen. Se Integrera en interaktiv video med en befintlig snabbvy.

(Valfritt) Identifiera Quickview-variabler optional-identifying-quickview-variables

NOTE
Den här aktiviteten krävs bara om följande är sant:
  • Du vill lägga till interaktivitet i videon genom att aktivera snabbvyer.
  • Er implementering av Experience Manager gör not använda ett ramverk för e-handelsintegrering för att hämta produktdata till Experience Manager från alla e-handelslösningar som IBM® WebSphere® Commerce, Elastic Path, hybris och Intershop. Se e-handelskoncept i Experience Manager Assets.
Om din implementering av Experience Manager använder e-handel kan du hoppa över den här uppgiften och fortsätta med nästa uppgift.

Börja med att identifiera dynamiska variabler som används i den befintliga QuickView-implementeringen, så att du kan mappa produktminiatyrbilder till deras motsvarande produkt i QuickView när du skapar interaktiva videofilmer.

När du lägger till tidssegment i en video tilldelar du en SKU (Stock Keeping Unit) och eventuella ytterligare variabler till varje miniatyrbild som du lägger till i ett segment. Sådana variabler används senare för att visa rätt Quickview-produkt.

Det är viktigt att kunna identifiera vilka variabler som krävs för att utlösa en produktsnabbvy på ett unikt sätt.

Ibland kan det räcka att rådfråga IT-specialister som är ansvariga för din befintliga QuickView-implementering. De vet troligtvis vilken minimiuppsättning data som krävs för att identifiera Quickview i systemet. Det är dock möjligt att helt enkelt analysera det befintliga beteendet för koden.

De flesta QuickView-implementeringar använder följande paradigm:

  • Användaren aktiverar ett element i användargränssnittet på webbplatsen. Klicka till exempel på en Quickview -knappen.
  • Webbplatsen skickar en Ajax-begäran till serverdelen för att läsa in QuickView-data eller -innehåll vid behov.
  • Quickview-data översätts till innehållet som förberedelse för återgivning på webbsidan.
  • Slutligen återges sådant innehåll på skärmen visuellt i koden.

Du bör därför besöka olika delar av webbplatsen där Quickview implementeras, aktivera snabbvyn och hämta den Ajax-URL som webbsidan skickar för att läsa in QuickView-data eller -innehåll.

Normalt behöver du inte använda några specialverktyg för felsökning. Moderna webbläsare har webbinspektörer som klarar ett bra jobb. Nedan följer några exempel på webbläsare som innehåller webbinspektörer:

  • Om du vill visa alla utgående HTTP-begäranden i Google Chrome använder du kortkommandot F12 (Windows) eller Command + Options + I (Mac) för att öppna Developer Tools och klickar sedan på Network -fliken.

  • I Mozilla Firefox kan du antingen aktivera plugin-programmet för Firebug med kortkommando F12 (Windows) eller Command + Options + I (Mac) och använda Net eller så kan du använda det inbyggda verktyget Granska och fliken Nätverk.

  • Aktivera felsökningsverktyget i Internet Explorer genom att trycka på F12.

När nätverksövervakning är aktiverat i webbläsaren utlöser du snabbvyn på sidan.

Nu kan du hitta Quickview Ajax-URL:en i nätverksloggen och kopiera den inspelade URL:en för framtida analys. När du utlöser snabbvyn skickas vanligtvis flera begäranden till servern. Vanligtvis är Quickview Ajax-URL en en av de första i listan. Den har antingen en komplex frågesträngsdel eller sökväg och dess MIME-svarstyp är antingen text/html, text/xml, eller text/javascript.

Under den här processen är det viktigt att du besöker olika delar av webbplatsen, med olika produktkategorier och typer. Anledningen är att URL:er för snabbvyn kan ha delar som är gemensamma för en viss webbplatskategori, men bara ändras om du besöker ett annat område på webbplatsen.

I det enklaste fallet är den enda variabeldelen i snabbvyns URL produktens SKU. I det här fallet är produktens SKU-värde den enda datadel som behövs för att lägga till miniatyrbilder i ett tidssegment i den interaktiva videon i Experience Manager.

I komplexa fall har dock QuickView-URL:en olika element förutom produkt-SKU:n, till exempel kategori-ID och färgkod. I sådana fall blir varje sådant element en separat variabel i definitionen av miniatyrbildsdata i Experience Manager.

Titta på följande exempel på QuickView-URL:er och deras resulterande miniatyrbildsvariabler:

En SKU, hittades i frågesträngen.

De inspelade URL:erna för snabbvyn är bland annat följande:

  • 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

Den enda variabeldelen i URL:en är värdet på productId= frågesträngsparameter, och det är tydligt ett SKU-värde. Därför behöver miniatyrbilderna bara SKU-fält med värden som 866558, 1196184, 1081492, 1898294.

En SKU, finns i URL-sökvägen.

De inspelade URL:erna för snabbvyn är bland annat följande:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

Variabeldelen finns i den sista delen av banan och blir SKU-värdet för miniatyrbilder i Experience Manager: 6422350843, 1607745002, 0086724882.

SKU och kategori-ID i frågesträngen.

De inspelade URL:erna för snabbvyn är bland annat följande:

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

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

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

I det här fallet finns det två olika delar i URL:en. SKU:n lagras i prodId -parametern och kategori-ID:t lagras i category= parameter.

Miniatyrbildsdefinitionerna är par. Det vill säga ett SKU-värde och en extra variabel som kallas categoryId. De resulterande paren är följande:

  • SKU är 305466 och categoryId är 1100004
  • SKU är 310181 och categoryId är 1100004
  • SKU är 308706 och categoryId är 1740148

Exempel

När ovanstående metod används på exempelwebbplatsen har du en webbsida med flera produktminiatyrer där var och en har en SEE MORE knapp:

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

När du har aktiverat alla produktsnabbvyer som är tillgängliga på sidan får du följande lista över snabbvybegäranden som gjorts i serverdelen:

  • 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

Om du tittar på serveranropen ser du att produktspecifik information bara finns i sökvägen för begäran. Du observerar också att frågesträngen inte används alls och att det finns två olika typer av datadelar:

  • Den första typen är ljus, kuddar, möbler och glasvaror. Du kan kalla den här"produktkategorin".
  • Den andra typen är produktkod, till exempel 233916597. Du kan anta att det är"produkt-SKU".

Med hjälp av den här informationen har hela snabbvyns URL följande mönster:

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

Utifrån en sådan analys kan du dra slutsatsen att du kan använda följande två variabler för miniatyrbilderna: categoryId och SKU.

Du är nu redo att överföra en video och dess associerade miniatyrbildsresurser.

(Valfritt) Skapa en förinställning för Interactive Video Viewer optional-creating-an-interactive-video-viewer-preset

Du kan hoppa över den här uppgiften och fortsätta till nästa om du tänker använda någon av de förinställda standardtyperna för interaktiv video som är färdiga att användas, som kallas Shoppable_Video_dark eller Shoppable_Video_light.

När du klickar på en miniatyrbild i redigeringsmiljön förhandsvisas Quickview visas.

chlimage_1-127

Du kan också skapa en egen förinställning för Interactive Video Viewer. Du kan bland annat bestämma hur videospelaren, de interaktiva miniatyrbilderna och miniatyrbildsvyn som visas i slutet av videon ska se ut.

En förinställning för Interactive Video Viewer återger videon och alla tidslinjesegment som du har lagt till. Ett exempel på standardsnabbvyn används också när du klickar på en produktminiatyr i Preview så att du kan testa interaktiviteten före publicering.

När du har sparat visningsförinställningen ställs dess läge automatiskt in på On i Viewer Presets sida. Det här läget innebär att den är synlig i komponenten Dynamic Media och när du förhandsgranskar en video med den. Se också till att du publicerar den nya visningsförinställningen manuellt.

Se Skapa en ny visningsförinställning för att skapa en egen förinställning för Interactive Video Viewer.

Överföra en video och dess tillhörande miniatyrbilder uploading-a-video-and-its-associated-thumbnail-assets

Om du redan har laddat upp videoklipp och miniatyrbilder går du vidare till Lägga till interaktivitet i videon.

Om du har överfört fel videoklipp eller bilder, eller om du vill ta bort överförda videoklipp eller bilder som du inte längre behöver, se Tar bort resurser.

Så här överför du en video och dess associerade miniatyrbildsresurser:

  1. Överför videon och tillhörande miniatyrbilder till den eller de mappar du vill använda.

    Se Överför resurser.

    Se Överför resurser med FTP-jobbplanering.

    Nu kan du lägga till interaktivitet i videon.

Lägga till interaktivitet i videon adding-interactivity-to-your-video

Du lägger till tidslinjesegment i en video med den visuella redigeraren på sidan Skapa interaktiv video.

När du har lagt till tidslinjesegment lägger du till miniatyrbilder i varje segment. För varje miniatyrbild som du lägger till tillämpar du en åtgärd på den. Du kan t.ex. använda en snabbvy för miniatyrbilden eller tilldela en hyperlänk till den eller ett Experience Fragment.

Se Upplevelsefragment.

NOTE
Den URL-baserade länkningsmetoden är inte möjlig om det interaktiva innehållet har länkar till relativa URL-adresser, särskilt länkar till Experience Manager Sites-sidor.

Undo och Redo alternativen, som finns uppe till höger på sidan, stöds under den aktuella skaps-/redigeringssessionen.

När du har sparat den interaktiva videon öppnas videon direkt i förhandsvisningen. Därifrån kan du välja en förinställning för Interactive Video Viewer och spela upp videon för att se en ungefärlig representation av hur den ser ut för kunderna.

Så här lägger du till interaktivitet i videon:

  1. I resursvyn navigerar du till videon som du överförde och vill göra interaktiv.

  2. Gör något av följande:

    • Hovra över bilden och tryck sedan Select (bockmarkeringsikon). Tryck på i verktygsfältet Edit.
    • Hovra över bilden och tryck sedan More actions (ikon med tre punkter) > Edit.
    • Tryck på bilden så att du kan öppna den på sidan Detaljvy. Tryck på i verktygsfältet Edit.
  3. Create Interactive Video gör du något av följande:

    • Tryck på Play så att du kan spela upp videon. När en viss produkt, tjänst eller detalj som du vill markera visas, trycker du Add Segment i verktygsfältet. Upprepa tills du har nått slutet av videon.

      För varje tidssegment som du lägger till tilldelar du en eller flera miniatyrbilder till det och länkar sedan miniatyrbilderna till QuickView-produktsidor som kunderna kan köpa eller till webbsidor för mer information.

    • Tryck på Play så att du kan spela upp videon. När en viss produkt, tjänst eller detalj som du vill markera visas, trycker du Pause. Tryck på Add Segment.

      Fortsätt spela upp och pausa videon vid punkter längs tidslinjen där du vill lägga till ett segment tills du når slutet av videon.

  4. (Valfritt) Dra fältet till vänster Timeline Scale Slider vänster för att zooma in eller höger för att zooma ut. På så sätt kan du styra hur mycket detaljskärpa som ska visas för de nya segmenten.

    chlimage_1-128

    Beroende på videons längd kan du Segment Duration är som standard följande värden:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 html-authored no-header
    Om videolängden är ... Inställningen för segmentvaraktighet är som standard..
    3 minuter eller mer 60 sekunder
    2-3 minuter 30 sekunder
    1-2 minuter 20 sekunder
    30-60 sekunder 10 sekunder
    30 sekunder eller mindre 5 sekunder

    Videons tidslinje använder så mycket skärmutrymme som det som finns tillgängligt för den. När du ändrar storlek på webbläsaren behåller segmenten som du lade till sin korrekta bredd.

    Följande tre skärmbilder använder samma video. Observera att bredden på varje segment ändras beroende på Timeline Scale inställning.

    chlimage_1-129

    Skärmbild A

    Skärmbild A ovan visar standardvyn för en 29-sekunders produktvideo. The Timeline Scale är inställt på 5 sekunder som standard.

    chlimage_1-130

    Skärmbild B

    I skärmbild B ovan visas Timeline Scale skjutreglaget har dragits från standardvärdet 5 sekunder till 3 sekunder. Observera att den enskilda personen Timeline Scale tidsstämplar anges nu med 3-sekundersintervall.

    chlimage_1-131

    Skärmbild C

    I skärmbild C ovan visas Timeline Scale inställningen flyttades till 8 sekunder. Lägg märke till hur segmenten som innehåller produktminiatyrer har krympt. Det är praktiskt att zooma ut på det här sättet om du har en lång video och vill kunna se en översikt över fler segment som normalt passar in på sidbredden.

  5. (Valfritt) Gör något av följande:

    • Justera ett segments starttid och sluttid.

      Markera ett segment och dra sedan den inledande eller avslutande blå ovalen för att justera start- respektive sluttiden. Den videobildruta som visas flyttas till lämplig tid i videon, baserat på dina justeringar. Tidslinjesegmentets rörelse begränsas baserat på intilliggande segment i tidslinjen. Den minsta tillåtna segmenttiden är en sekund.

      Använd följande kortkommandon för att snabbt kontrollera och finjustera videosegmenten:

      • Tryck på den blå inledande ovalen om du vill söka efter videon direkt till början av det segmentet.
      • Tryck på den efterföljande blå ovalen om du vill söka efter videon direkt till slutet av det segmentet.
      • Tryck på hela segmentet om du vill återställa videouppspelningen till början av segmentet

    chlimage_1-132

    Flytta slutet av ett tidslinjesegment

    • Ta bort ett segment

      Markera det sista segmentet på tidslinjen och tryck sedan på i verktygsfältet Delete Segment. Om två eller flera segment är markerade visas Delete Segment funktionen är inaktiverad.

      Du kan bara ta bort det sista segmentet. Om du till exempel vill ta bort alla segment på tidslinjen måste du alltid markera det sista segmentet och sedan trycka Delete Segment.

  6. Markera ett tidssegment som du vill associera en eller flera miniatyrbilder till.

  7. Till höger om videon trycker du på Content -fliken.

  8. Under Content flik, tryck Select Assets, bläddra sedan bland och markera alla bildresurser som du vill använda med videon. De valda resurserna läggs till i Asset Selector i Content -fliken.

  9. Gör något av följande i resursväljaren under fliken Innehåll:

    table 0-row-2 1-row-2 html-authored no-header
    Associera en miniatyrbild med det markerade tidslinjesegmentet

    Tryck på bilden på resurssväljarpanelen till höger.

    Du kan lägga till så många miniatyrbilder du vill i ett tidslinjesegment. För varje bild som du väljer visas en bock över bilden i resursväljaren.

    Ta bort en miniatyrbild från det markerade tidslinjesegmentet

    Gör något av följande:

    • Avmarkera en bild genom att trycka på den på panelen Resursväljaren med en bockmarkering. Bildresursen tas bort från tidslinjesegmentet.
    • Tryck på en bild i det markerade tidslinjesegmentet och tryck sedan på Ta bort produkt.

    Resursväljaren

    Om du trycker på en bild på resurssväljarpanelen läggs den till i det valda tidslinjesegmentet.

  10. Markera en miniatyrbild i något av tidslinjesegmenten och tryck sedan på Actions -fliken.

  11. Gör något av följande:

    <

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 html-authored no-header
    Associera den markerade miniatyrbilden med en snabbvy

    Tryck på under Åtgärdstyp Snabbvy.

    Om du är kund inom Experience Manager Sites och e-handel:

    • Observera att textfältet SKU-värde är förifyllt med den valda produktens SKU (Stock Keeping Unit), som är en unik identifierare för varje separat produkt eller tjänst som du erbjuder. Det här fältet fylls i automatiskt när bilden är kopplad till en produkt i Experience Manager Commerce.
    • Om den i förväg ifyllda SKU:n är felaktig trycker eller klickar du på produktväljarens ikon (förstoringsglas) för att öppna sidan Välj produkt. Tryck eller klicka på den produkt du vill använda och tryck sedan på bockmarkeringen i det övre högra hörnet av sidan så att du kan gå tillbaka till Interactive Video Editor.

    Om du not en Experience Manager Sites- eller e-handelskund

    • Se Identifiera hotspot-variabler. Du måste definiera dessa variabler.
    • Som standard använder det här SKU-fältet bildresursens filnamn utan tillägget. Om du använder en standardnamnkonvention för dina filer som baseras på SKU, behöver filerna vanligtvis inte redigeras ytterligare.
    • I annat fall redigerar du standardvärdet och anger rätt SKU-värde. I textfältet SKU-värde skriver du produktens SKU (Stock Keeping Unit), som är en unik identifierare för varje separat produkt eller tjänst som du erbjuder. Det angivna SKU-värdet fyller automatiskt i variabeldelen av QuickView-mallen så att systemet vet att den avbrutna bilden associeras med en viss SKU:s snabbvy.

    (Valfritt) Om det finns andra variabler i snabbvyn som du måste använda för att identifiera en produkt ytterligare trycker du på Lägg till allmän variabel. Ange en extra variabel i textfältet. Till exempel: category=Womens är en tillagd variabel.

    Associera den markerade miniatyrbilden med en hyperlänk

    Tryck på under Åtgärdstyp Hyperlänk gör du något av följande:

    • Om du är Experience Manager Sites-kund går du till en webbsida genom att trycka på ikonen Platsväljare (mapp). Den URL-baserade länkningsmetoden är inte möjlig om det interaktiva innehållet har länkar till relativa URL-adresser, särskilt länkar till Experience Manager Sites-sidor.
    • Om du är en fristående Dynamic Media-kund anger du den fullständiga URL-sökvägen till en länkad webbsida i textfältet HREF.

    Var noga med att ange om länken ska öppnas på en ny flik i webbläsaren eller på den aktuella fliken.

    Associera den markerade miniatyrbilden med ett Experience Fragment

    Tryck på under Åtgärdstyp Experience Fragment gör du följande:

    • Om du är Experience Manager Sites-kund trycker eller klickar du på ikonen Sök (förstoringsglas) för att öppna sidan Experience Fragment. Tryck eller klicka på det Experience Fragment du vill använda och tryck sedan på Välj i det övre högra hörnet av sidan så att du kan gå tillbaka till åtgärdspanelen på föregående sida.
      Se Upplevelsefragment.
    • Ange bredd och höjd för Experience Fragment så som det visas på videon.

    Anteckning: Delningsverktygen för sociala medier i interaktiv video stöds inte när du bäddar in visningsprogrammet i ett Experience Fragment. Du kan undvika det här problemet genom att använda eller skapa visningsförinställningar som inte har verktyg för delning av sociala medier. Med sådana visningsförinställningar kan du bädda in dem i Experience Fragments.

    Redigera en åtgärd som redan har tilldelats en miniatyrbild Tryck på en miniatyrbild med en kedjelänk till höger om textetiketten i ett tidslinjesegment. Länken kedja anger att en åtgärd har tilldelats den. Tryck på Åtgärder så att du kan göra ändringarna.
    Ändra textetiketten för en miniatyrbild

    Som standard använder textetiketten miniatyrbildernas Title metadatafält. If Title finns inte, används miniatyrbildens filnamn i stället, men utan filtillägget.

    Ändra textetiketten för en miniatyrbild under Åtgärder anger du den önskade texten direkt under bildresursen som visas. Se skärmbilden nedan.

    Den nya textetiketten används bara av själva videospelaren och den miniatyrtext som visas i tidslinjesegmentet. Etikettändringen påverkar inte miniatyrbildens metadatafält Titel eller dess filnamn.

    Om du vill återställa en ändring som du har gjort I sidans övre högra hörn trycker du Ångra eller Gör om.

    experience_efragment_interactiveVideos

    En ny textetikett läggs till i miniatyrbilden.

  12. Gör något av följande:

    • Upprepa steg 6-11 om du vill lägga till fler miniatyrbilder i tidslinjesegment i videon.
    • Fortsätt till det valfria steget 13.
  13. (Valfritt) Gör något av följande:

    • Merge Segment - Du kan kombinera två intilliggande segment (med eller utan produktminiatyrer tilldelade till dem) till ett segment.

      Tryck på två eller flera intilliggande segment på tidslinjen som du vill sammanfoga till ett. Det finns inga blå ovala draghandtag på de två valda segmenten i skärmbilden nedan.

      Tryck Merge Segment i verktygsfältet.
      chlimage_1-134

    Sammanfoga två valda femsekunderssegment till ett segment på tio sekunder.

    • Split Segment - Du kan dela upp ett enskilt segment i två segment med samma tidsindelning. Om det redan finns produktminiatyrer för segmentet kombineras miniatyrbilderna till det vänstra segmentet.

      Tryck på ett segment som du vill dela i mitten på tidslinjen och tryck sedan på Split Segment i verktygsfältet.

      Om du markerar två eller flera segment inaktiveras Split Segment -funktion.
      chlimage_1-135

    Dela upp ett markerat segment på tio sekunder i två segment på fem sekunder vardera.

  14. Nära det övre högra hörnet av Create Interactive Video visas namnet på den valda visningsförinställningen som används för videon. Tryck på namnet om du vill välja en annan visningsförinställning.

    Till exempel Shoppable_Video_light Med visningsförinställningen kan du spela upp videon med ett vitt visningsområde bredvid videon. Visningsområdet är där de klickbara miniatyrbilderna visas under uppspelningen. The Shoppable_Video_dark Med visningsförinställningen kan du spela upp videon med ett svart visningsområde bredvid videon.

    Om du har skapat en egen förinställning för Interactive Video Viewer kan du även se den i listan med förinställningar som du kan välja mellan.

    När du är klar trycker du Save.

    note note
    NOTE
    När du sparar den interaktiva videon sparas en associerad .vtt-fil automatiskt med den. The .vtt filen sparas i _VTT mapp i roten av Assets. Filen och mappen är nödvändiga för att den interaktiva videon ska kunna spelas upp korrekt på webbplatsen. Därför ska du inte flytta, redigera eller ta bort mappen _VTT eller dess innehåll.
  15. Publicera den interaktiva videon. Publicering skapar den inbäddningskod eller URL som du så småningom kopierar och klistrar in på webbplatsupplevelserna.

    Om du har lagt till interaktivitet med snabbvyer ska du bara använda inbäddningskoden; om du har lagt till interaktivitet med hyperlänkade webbsidor kan du även använda den publicerade webbadressen. Observera dock att den URL-baserade länkningsmetoden inte är möjlig om ditt interaktiva innehåll har länkar till relativa URL-adresser, särskilt länkar till Experience Manager Sites-sidor.

    Se Publicera resurser.

    note note
    NOTE
    Om du vill publicera en videoklipp som kan köpas med snabbvyer måste du även publicera videons relaterade bildresurser separat från din e-handelsplats.

    När du har lagt till tidslinjesegment och publicerat den interaktiva videon kan du lägga till den på din befintliga startsida för webbplatsen. Se Integrera en interaktiv video med webbplatsen.

Publicera interaktivt videomaterial publishing-interactive-video-assets

Se Publicera resurser om du vill ha mer information om hur du publicerar interaktiva videoresurser.

Integrera en interaktiv video med webbplatsen integrating-an-interactive-video-with-your-website

När du har överfört en video, lagt till tidslinjesegment i den och publicerat den interaktiva videon är du nu redo att lägga till den på din befintliga webbplats.

Om du är kund hos Experience Manager Sites kan du lägga till den interaktiva videon genom att dra Interactive Media-komponenten till din sida. Se Lägga till Dynamic Media-resurser på sidor.

Om du är en fristående Experience Manager Assets-kund kan du lägga till den interaktiva videon manuellt på din webbplats enligt beskrivningen i det här avsnittet.

Så här integrerar du en interaktiv video med din webbplats:

  1. Kopiera den publicerade interaktiva videons inbäddningskod eller URL.

    Se Bädda in video- eller bildvisningsprogrammet på en webbsida.

    Om du har lagt till interaktivitet med snabbvyer ska du bara använda inbäddningskoden; om du har lagt till interaktivitet med hyperlänkade webbsidor kan du även använda den publicerade webbadressen. Observera dock att den URL-baserade länkningsmetoden inte är möjlig om ditt interaktiva innehåll har länkar till relativa URL-adresser, särskilt länkar till Experience Manager Sites-sidor.

  2. Identifiera var den statiska videon finns i målets webbsideskod.

  3. Ta bort den statiska videon och ersätt koden med den inbäddade koden eller URL-adressen som du kopierade från Experience Manager Assets, som den är.

    Den kopierade inbäddningskoden ställs in för en responsiv miljö så att den automatiskt ska passa in på det område som den statiska videon tidigare tog upp.

NOTE
Nu är du klar om du har lagt till interaktivitet med endast hyperlänkade webbsidor.
Om du har lagt till någon interaktivitet för att aktivera en snabbvy är miniatyrbilderna bredvid den interaktiva videon endast avsedda för visning. de är ännu inte integrerade med dina befintliga snabbvyer. I så fall måste du integrera den interaktiva videon med befintliga snabbvyer på webbplatsen.

Exempel

Använda demowebbplatsen som exempel:

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

Lägg märke till hur det är standardkod för videoinbäddning:

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

Integrationen är lika enkel som att ta bort inbäddningskoden för video och ersätta den med den interaktiva inbäddningskoden för video från Experience Manager. Resultatet visas på följande URL. Även om det visar en interaktiv video på sidan är den ännu inte integrerad med de befintliga snabbvyerna:

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

Integrera en interaktiv video med en befintlig snabbvy integrating-an-interactive-video-with-an-existing-quickview

NOTE
Detta gäller endast om du är en fristående Experience Manager Assets-kund.

Det sista steget i den här processen är att integrera din interaktiva video med en befintlig QuickView-implementering som används på din webbplats. Det finns ingen lösning på integreringen som fungerar i alla fall. Alla QuickView-implementeringar är unika. Därför behövs ett specifikt tillvägagångssätt som innebär att IT-personal på frontend får hjälp.

Den befintliga Quickview-implementeringen representerar normalt en kedja av interrelaterade åtgärder som inträffar på webbsidan i följande ordning:

  1. En användare utlöser ett element i användargränssnittet för webbplatsen.
  2. FrontEnd-koden hämtar en QuickView-URL som baseras på användargränssnittselementet som utlöstes i steg 1.
  3. Slutkoden skickar en AJAX med den URL som du får i steg 2.
  4. Bakåtlogiken returnerar motsvarande QuickView-data eller -innehåll tillbaka till slutkoden.
  5. Slutkoden läser in QuickView-data eller -innehåll.
  6. Om du vill kan du konvertera den inlästa QuickView-informationen till en HTML-representation med hjälp av koden.
  7. I slutkoden visas en modal dialogruta eller panel och HTML-innehållet på skärmen återges för slutanvändaren.

Dessa anrop kanske inte representerar oberoende offentliga API-anrop som kan anropas av webbsidans logik från ett godtyckligt steg. I stället är det ett kedjat anrop där varje steg döljs i den sista fasen (återanrop) av föregående steg.

Samtidigt som den interaktiva videon ersätter steg 1, och delvis steg 2, när en användare klickar på en miniatyrbild i den interaktiva videon, hanteras denna användarinteraktion av användaren av användaren. Visningsprogrammet returnerar en händelse till webbsidan som innehåller alla miniatyrbildsdata som tidigare lagts till i Experience Manager.

I en sådan händelsehanterare gör koden längst fram följande:

  • Lyssnar på en händelse som skickas av den interaktiva videon.
  • Skapar en QuickView-URL som baseras på miniatyrbildsdata.
  • Startar processen att läsa in snabbvyn från serverdelen och återge den på skärmen för visning.

Dessutom har Interactive Video Viewer stöd för helskärmsläge. Slutanvändaren aktiverar snabbvyer genom att klicka på en miniatyrbild utan att lämna helskärmsläget. För att uppnå den här funktionen ändrar du frontdelskoden så att den modala dialogrutan för snabbvyn bifogas till visningsprogrammets behållare. Lägg inte till dokument-BODY eller något annat webbsideselement som inte är tillgängligt när visningsprogrammet är i helskärmsläge. Koden som utför det här jobbet lyssnar på ett till återanrop till visningsprogrammet som skickas när visningsprogrammet har lästs in på sidan.

Den inbäddningskod som returneras av Experience Manager har redan en färdig händelsehanterare på plats. Den kommenteras ut enligt följande markerade kodfragment:

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

Därför är det bara nödvändigt att avkommentera det markerade kodfragmentet ovan och ersätta dummy-hanterarbrödtexten med kod som är specifik för den aktuella webbsidan.

Det finns två standardhanterare för återanrop i standardkoden för inbäddning: quickViewActivate och initComplete. The quickViewActivate hanteraren aktiveras när användaren klickar på en miniatyrbild i visningsprogrammet. Integrera visningsprogrammet med QuickView-aktiveringslogiken. The initComplete hanteraren utlöses bara en gång när användaren läser in på sidan. Den här hanteraren används för att justera platsen för dialogrutan Snabbvy i webbsidans DOM.

Processen med att skapa en URL för snabbvyn är motsatt till processen att identifiera miniatyrbildsvariabler som beskrivs tidigare i det här avsnittet. Med hjälp av de tidigare identifierade exemplen på snabbvyns URL kan du se hur snabbvyns URL är uppbyggd i varje fall:

En SKU, som finns i frågesträngen
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
En SKU, finns i URL-sökvägen
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU och kategori-ID i frågesträngen
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });

Det sista steget för att utlösa snabbgransknings-URL:en och aktivera snabbvypanelen kräver troligen hjälp av en IT-handläggare på IT-avdelningen. De har kunskap om hur de bäst kan utlösa QuickView-implementeringen från rätt steg med en färdig QuickView-URL.

Du kan se hur dessa steg tillämpas på demowebbplatsen för att helt integrera en interaktiv video med QuickView-koden. Tidigare i det här avsnittet identifierades strukturen för snabbvyns URL som följande:

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

Det är enkelt att rekonstruera URL:en i quickViewActivate hanterare använda categoryId och sku fält som är tillgängliga i inData objekt som skickas till hanteraren via visningsprogrammets kod enligt följande:

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

Demonstrationswebbplatsen utlöser dialogrutan Snabb visning med en enkel loadQuickView() funktionsanrop. Den här funktionen har bara ett argument, vilket är snabbvydata-URL:en. Det sista steget är att integrera den interaktiva videon genom att lägga till följande kodrad i quickViewActivate hanterare:

loadQuickView(quickViewUrl);

Slutligen måste du se till att Quickview är kopplad till visningsprogrammets behållarelement. Standardkoden för inbäddning innehåller exempelsteg för att uppnå den här funktionen. Om du vill få en referens till visningsprogrammets behållarelement kan du använda följande kodrader:

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

Plats inner_container är en referens till DIV -element som hanteras av visningsprogrammet. Du vill att dialogrutan ska vara underordnad den DIV.

Stegen för att hitta det modala dialogruteelementet och bifoga det till behållaren ovan är skiftlägeskänsliga. Återigen kan du få hjälp av den som är bekant med den QuickView-implementering som behövs.

För exempelwebbplatsen implementeras den modala dialogrutan för snabbvyn som en DIV med det spärra/knipa-ID som är kopplat direkt till dokumentet BODY. Koden som flyttar dialogrutan till visningsprogrammets behållare är därför så enkel som följande:

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

Den fullständiga källkoden är följande:

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

Den färdiga demowebbplatsen med den helt integrerade interaktiva videon ser ut så här:

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

Skapa anpassade popup-fönster med snabbvyer using-quickviews-to-create-custom-pop-ups

Se Skapa anpassade popup-fönster med snabbvyer.

recommendation-more-help
4452738f-2bdf-4cd4-9b45-905a69d607ad