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.
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.
Om du skapar en interaktiv video för att starta en webbsida när en användare väljer en miniatyrbild blockerar vissa enheter popup-webbsidan från att ö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 går du till exempel till Settings > Safari > Blockera popup-fönster och sedan flytta kontrollen till Off. När du spelar upp en interaktiv video och väljer en miniatyrbild blir du nu tillfrågad om du vill öppna popup-fönstret. Om du accepterar öppnas webbsidan.
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.
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.
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:
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:
Interaktiva videosteg:
(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:
(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.
Ö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.
MXF-videoformatet stöds ännu inte för användning med interaktiva videor i Dynamic Media.
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.
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
Den här aktiviteten krävs bara om följande är sant:
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 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:
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:
En SKU, hittades i frågesträngen. |
De inspelade URL:erna för snabbvyn är bland annat följande:
Den enda variabeldelen i URL:en är värdet på |
En SKU, finns i URL-sökvägen. |
De inspelade URL:erna för snabbvyn är bland annat följande:
Variabeldelen finns i den sista delen av banan och blir SKU-värdet för miniatyrbilder i Experience Manager: |
SKU och kategori-ID i frågesträngen. |
De inspelade URL:erna för snabbvyn är bland annat följande:
I det här fallet finns det två olika delar i URL:en. SKU:n lagras i Miniatyrbildsdefinitionerna är par. Det vill säga ett SKU-värde och en extra variabel som kallas
|
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":
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:
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:
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.
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.
Om du redan har laddat upp videoklipp och miniatyrbilder går du vidare till Lägg till interaktivitet i videon.
MXF-videoformatet stöds ännu inte för användning med interaktiva videoklipp i Dynamic Media.
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:
Ö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.
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.
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.
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.
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:
I resursvyn navigerar du till videon som du överförde och vill göra interaktiv.
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.
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.
(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.
(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:
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.
Markera ett tidssegment som du vill associera en eller flera miniatyrbilder till.
Till höger om videon väljer du Content -fliken.
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.
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:
|
Om du väljer en bild på resurssväljarpanelen läggs den till i det valda tidslinjesegmentet.
Markera en miniatyrbild i ett av tidslinjesegmenten och välj sedan Actions -fliken.
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:
Om du not en Experience Manager Sites- eller e-handelskund
(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:
|
Associera den markerade miniatyrbilden med en hyperlänk | Under Åtgärdstyp väljer du Hyperlänkgör du något av följande:
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:
|
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 Ä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.
Gör något av följande:
(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.
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.
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.
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.
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.
Se Publicera resurser om du vill ha mer information om hur du publicerar interaktiva videoresurser.
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.
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.
Identifiera var den statiska videon finns i målets webbsideskod.
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.
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 din befintliga snabbvy. I så fall måste du nu integrera den interaktiva videon med den befintliga snabbvyn på webbplatsen.
Exempel
Använda demowebbplatsen som exempel:
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:
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:
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:
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:
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. 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:
Se Skapa anpassade popup-fönster med snabbvyn.