Interaktiva videor

Du kan enkelt skapa interaktiva videor - även kallade videor som kan köpas - som genererar konverteringar 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 välja 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 välja önskad artikel. Användbara och specifika upplevelser som dessa ökar kundernas engagemang och konverteringar.

Se även Interaktiva bilder.

Interaktiv video in action

Om du vill se en interaktiv videoklipp i praktiken väljer du Live Demos, bläddra till Shoppable Media på sidan och välj videon som kan köpas.

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

• Välj miniatyrbilden om du vill pausa videon och öppna produktens snabbvy. Välj till exempel miniatyrbilden Kitchenaid i videon för att få en 360-gradersvy av blandaren, eller zooma in för att se blandarinformationen.

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

Se hur interaktiva videor skapas

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

Adobe Customer Solutions 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

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

Interaktiva videosteg:

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 snabbvyn.
   • 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 eller 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 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.

   OBSERVERA

   MXF-videoformatet stöds ännu inte för användning med interaktiva videor i Dynamic Media.

4. Lägg 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ägg till interaktivitet i videon.
   Se Publicera resurser.

5. Lägga till en interaktiv video på din webbplats eller på din webbplats i Experience Manager - Om du använder Experience Manager Sites eller e-handel, eller båda, kan du lägga till den interaktiva videon på en webbsida. Dra Interactive Media-komponenten till sidan i Experience Manager. 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 QuickView.
   Lägga till Dynamic Media-resurser på sidor

(Valfritt) Identifiera QuickView-variabler

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 räcker det att rådfråga IT-specialister som är ansvariga för din befintliga QuickView-implementering. De känner troligen till den minsta uppsättningen data för att identifiera Quickview i systemet. Det går dock även att 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. Du kan till exempel välja en snabbvyknapp.
• 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 se alla utgående HTTP-begäranden i Google Chrome trycker du på F12 (Windows) eller Kommando+Alternativ+I (Mac) för att öppna panelen Utvecklingsverktyg och sedan välja Nätverk -fliken.

• I Firefox kan du antingen aktivera plugin-programmet för Firebug genom att trycka på F12 (Windows) eller Kommando+Alt+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-adresser för snabbvyn kan innehålla 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, färgkod och storlekskod. 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:

Exempel

När ovanstående metod används på exempelwebbplatsen har du en webbsida med flera produktminiatyrbilder där var och en har knappen "SE MER":

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 produkter i snabbvyn som är tillgängliga på sidan får du följande lista över snabbvybegäranden som gjorts i bakgrunden:

• 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

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 i det interaktiva visningsprogrammet Shoppable_Video_dark eller Shoppable_Video_light.

När en miniatyrbild är markerad i redigeringsmiljön visas en förhandsvisning av dialogrutan Snabbvy.

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. I förhandsvisningsläget används dessutom ett standardexempel för snabbvyn när du väljer en miniatyrbild av en produkt, så att du kan testa dess interaktivitet innan du publicerar den.

När du har sparat visningsförinställningen ställs dess läge automatiskt in på På på sidan Förinställningar för visningsprogram. 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

Om du redan har laddat upp videoklipp och miniatyrbilder går du vidare till Lägg 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 Ta 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ägg till interaktivitet i videon

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.

Alternativen Ångra och Gör om, nära det övre högra hörnet 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 välj sedan Select (bockmarkeringsikon). I verktygsfältet väljer du Edit.

   • Hovra över bilden och välj sedan More actions (ikon med tre punkter) > Edit.

   • Markera bilden så att du kan öppna den på sidan Detaljvy. I verktygsfältet väljer du Edit.

3. Gör något av följande på sidan Skapa interaktiv video:

   • För att börja spela upp videon väljer du Play -knappen. När en viss produkt, tjänst eller detalj som du vill markera visas, väljer 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.

   • För att börja spela upp videon väljer du Play -knappen. När en viss produkt, tjänst eller detalj som du vill markera visas, väljer du Pause. Välj 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, så att du kan styra hur mycket av detaljerna som visas för de segment du har lagt till.

   

   Beroende på videons längd är standardvärdet för Segmentvaraktighet följande värden:

   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å inställningen för tidslinjens skala.

   

   Skärmbild A

   Skärmbild A ovan visar standardvyn för en 29-sekunders produktvideo. Tidslinjens skala är inställd på 5 sekunder som standard.

   

   Skärmbild B

   I skärmbild B ovan har reglaget för tidslinjeskala dragits från standardvärdet 5 sekunder till 3 sekunder. Observera att tidstämplarna för den enskilda tidslinjens skala nu är inställda med 3-sekundersintervall.

   

   Skärmbild C

   I skärmbild C ovan flyttades inställningen för tidslinjeskala 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:

     • Om du vill söka efter videon direkt till början av det segmentet väljer du den blå inledande ovalen.
     • Om du vill söka efter videon direkt i slutet av det segmentet markerar du den efterföljande blå ovalen.
     • Om du vill återställa videouppspelningen till början av det segmentet markerar du hela segmentet.

   

   Flytta slutet av ett tidslinjesegment

   • Ta bort ett segment

     Markera det sista segmentet på tidslinjen och välj sedan i verktygsfältet Delete Segment. Om två eller flera segment är markerade är funktionen Ta bort segment 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 och sedan markera Delete Segment.

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

7. Till höger om videon väljer du Content -fliken.

8. Under fliken Innehåll väljer du Select Assets, bläddra sedan bland och markera alla bildresurser som du vill använda med videon. De markerade resurserna läggs till på panelen Resursväljare på fliken Innehåll.

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

   Associera en miniatyrbild med det markerade tidslinjesegmentet	Markera 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 med en bockmarkering på resurssväljarpanelen. Bildresursen tas bort från tidslinjesegmentet. Markera en bild i det markerade tidslinjesegmentet och välj sedan en bild i verktygsfältet Ta bort produkt.

   

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

10. Markera en miniatyrbild i ett av tidslinjesegmenten och välj sedan Actions -fliken.

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

    <

    Associera den markerade miniatyrbilden med en snabbvy	Under Åtgärdstyp väljer du 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 värdet fylls i automatiskt när bilden associeras med en produkt i Experience Manager Commerce. Om den i förväg ifyllda SKU:n är felaktig väljer du produktväljarens ikon (förstoringsglas) för att öppna sidan Välj produkt. Markera den produkt du vill använda och markera sedan 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. Variablerna måste definieras. Som standard använder det här SKU-fältet bildresursens filnamn utan tillägget. Om du använder en standardnamngivningskonvention för dina filer som baseras på SKU, kräver vanligtvis inte det här filnamnet några ytterligare redigeringar. 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 valda 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 väljer du 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	Under Åtgärdstyp väljer du Hyperlänkgör du något av följande: Om du är kund hos Experience Manager Sites väljer du ikonen Platsväljare (mapp) för att navigera till en webbsida. 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	Under Åtgärdstyp väljer du Experience Fragmentgör du följande: Om du är Experience Manager Sites-kund väljer du sökikonen (förstoringsglas) för att öppna sidan Experience Fragment. Välj det Experience Fragment som du vill använda och välj sedan 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 bredden och höjden på Experience Fragment så som du vill att det ska visas i 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	Markera en miniatyrbild som har en kedjelänk till höger om textetiketten i ett tidslinjesegment. Länken kedja anger att en åtgärd har tilldelats den. Välj Åtgärder så att du kan göra ändringarna.
    Ändra textetiketten för en miniatyrbild	Som standard använder textetiketten miniatyrbildens Title metadatafält. If Title finns inte, används miniatyrbildens filnamn i stället, men utan filnamnstillä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.
    Så här återställer du en ändring:	I sidans övre högra hörn väljer du Ångra eller Gör om.

    

    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.

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

      Välj Merge Segment i verktygsfältet.
      

    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.

      Markera det segment som du vill dela upp i halva på tidslinjen och markera sedan Split Segment i verktygsfältet.

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

    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. Markera 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 valda miniatyrbilderna visas under uppspelning. 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 visas den i listan med förinställningar som du kan välja mellan.

    När du är klar väljer du Save.

    OBSERVERA

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

    OBSERVERA

    Om du vill publicera en videoklipp som kan köpas med QuickView 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

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

Integrera en interaktiv video med webbplatsen

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.

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 Quickview 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 passar det område som den statiska videon tidigare upptog.

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

Observera att inbäddningskoden är standard:

<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 den befintliga snabbvyn:

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 QuickView

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 representerar inte 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 väljer en miniatyrbild i den interaktiva videon, hanteras denna användarinteraktion 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 utlöser snabbvyn genom att välja 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 måste lyssna på en eller flera återanrop till visningsprogrammet som skickas efter visningsprogrammet som läses 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 en miniatyrbild är markerad 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:

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. Så det sista steget för att integrera den interaktiva videon är att lägga till följande kodrad i quickViewActivate hanterare:

loadQuickView(quickViewUrl);

Kontrollera slutligen att dialogrutan Snabbvy ä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.

Om du använder 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 snabbvyn

Se Skapa anpassade popup-fönster med snabbvyn.

Resurser för Business.Adobe.com

Personalized Experiences Embedded Charts Mobile Forms Responsive Forms Headless Cms Content Management System