Interaktiv video interactive-video

Interactive Video Viewer är en videospelare som spelar upp strömmande och progressiv video som är kodad i H.264-format.

Visningsprogrammet visar även interaktiva produktfärgrutor bredvid videoinnehållet. Både en video och adaptiva videouppsättningar stöds. Det är utformat för att fungera både på stationära och mobila webbläsare som stöder HTML5-video. Visningsprogrammet har stöd för valfria undertexter som visas ovanpå videoinnehåll, videokapitelnavigering och verktyg för delning via sociala medier. Syftet med det här visningsprogrammet är att hjälpa dig att implementera en videoupplevelse som kan köpas. Det innebär att användare kan välja en färgruta som är kopplad till en viss videotidsregion och omdirigeras till en snabbvy eller produktinformationssida på kundens webbplats.

Visningstypen är 510.

Demo-URL:er section-c0ad383db6a444979dc7eeb1ec4cf54d

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/glacier/InteractiveVideoViewerDemo.html?lang=sv-SE

Och

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/AXIS/index.html?lang=sv-SE

Systemkrav section-b7270cc4290043399681dc504f043609

Se Systemkrav.

Använda Interactive Video Viewer section-e6c68406ecdc4de781df182bbd8088b4

Interactive Video Viewer representerar en JavaScript-huvudfil och en uppsättning hjälpfiler som hämtats av visningsprogrammet under körning. En enda JavaScript ingår i alla Viewer SDK-komponenter som används av just detta visningsprogram, resurser och CSS.

Interactive Video Viewer kan användas i popup-läge med en produktionsklar HTML-sida som finns i Image Serving Viewer. Den kan också användas i inbäddat läge, där den integreras med målwebbsidan med det dokumenterade API:t.

Konfigurering och skalning liknar de andra visningsprogrammen som beskrivs i den här handboken. All skalning görs med CSS (Cascading Style Sheets).

Se Kommandoreferens som är gemensam för alla visningsprogram - Konfigurationsattribut och Kommandoreferens som är gemensam för alla visningsprogram - URL

Interagera med Interactive Video Viewer section-642e66ca38cd4032992840ec6c0b0cd2

Interactive Video Viewer innehåller en uppsättning standardkontroller för användargränssnitt för videouppspelning, t.ex. en Play/Pause-knapp, videobubblor, tidsbubbla för video, indikator för uppspelningstid/total tid, volymkontroll, helskärmsknapp och växling för stängd bildtext. Alla dessa kontroller grupperas i ett kontrollfält direkt under huvudvyn.

På enheter med pekskärm döljs volymkontrollen från användargränssnittet, eftersom det bara är möjligt att styra volymen med enhetens maskinvaruknappar.

När visningsprogrammet körs i popup-läge är knappen för helskärm inte tillgänglig i användargränssnittet.

Visningsprogrammet visar en panel med interaktiva färgrutor till höger om videovisningsområdet. Listan med färgrutor visas automatiskt när videon spelas upp, så att färgrutor som motsvarar det aktuella videoområdet visas. Om du klickar eller trycker på en färgruta utlöses en åtgärd som var kopplad till den färgrutan under redigeringstiden. Beroende på hur du ställer in den kan utlösaren dirigeras om till en annan sida på webbplatsen. Det kan också skicka produktinformation tillbaka till webbsidans logik, som i sin tur kan utlösa att en snabbvy öppnas som visar relaterat produktinnehåll.

Du kan snabbt navigera i videoinnehållet när videokapitlet är aktiverat. Videokameror visas som markörer i videonavigeringsspåret och kapiteltiteln och beskrivningen visas vid överrullning (eller på pekskärmar). Kunden kan söka efter ett visst kapitel genom att klicka på en kapitelmarkör eller trycka på en kapitelbeskrivningsbubbla.

Visningsprogrammet har också stöd för olika verktyg för delning av sociala medier. De är tillgängliga som en enda knapp i användargränssnittet, som utökas till ett delat verktygsfält när användaren klickar eller trycker på det. Verktygsfältet för delning innehåller en ikon för varje typ av delningskanal som stöds, till exempel Facebook, Twitter, e-postdelning, inbäddning av koddelning och länkdelning. När verktygen för e-postdelning, inbäddning eller länkdelning är aktiverade visas en modal dialogruta med ett motsvarande inmatningsformulär. När Facebook eller Twitter anropas omdirigeras användaren till en standarddelningsdialogruta från en tjänst för sociala medier. Dessutom pausas videouppspelningen automatiskt när ett delningsverktyg aktiveras. Delningsverktygen är inte tillgängliga i helskärmsläge på grund av säkerhetsbegränsningar i webbläsaren.

Visningsprogrammet är fullt åtkomligt via tangentbordet. Se Tangentbordstillgänglighet och navigering.

Bädda in interaktiv videovisare section-6bb5d3c502544ad18a58eafe12a13435

Interaktiv Video Viewer är inbäddad på värdsidan. En sådan webbsida kan ha en statisk layout eller vara"responsiv" och visas på olika enheter eller för olika webbläsarfönsterstorlekar.

För att tillgodose dessa behov har visningsprogrammet stöd för två primära åtgärdslägen: inbäddning i fast storlek och responsiv inbäddning.

Om inbäddningsläge med fast storlek och inbäddningsläge för responsiv design

I det inbäddade läget läggs visningsprogrammet till på den befintliga webbsidan, som kanske redan har kundinnehåll som inte är relaterat till visningsprogrammet. Visningsprogrammet tar normalt bara upp en del av en webbsidas fastighet.

De viktigaste användningsområdena är webbsidor som är orienterade för datorer eller surfplattor, och även responsiva designade sidor som automatiskt anpassar layouten beroende på enhetstyp.

Inbäddning med fast storlek används när visningsprogrammet inte ändrar sin storlek efter den första inläsningen. Den här funktionen är det bästa alternativet för webbsidor som har en statisk layout.

Inbäddning av responsiv design förutsätter att visningsprogrammet måste ändra storlek vid körning som svar på storleksändringen för behållaren DIV. Det vanligaste användningsområdet är att lägga till ett visningsprogram på en webbsida som använder en flexibel sidlayout.

I läget responsiv designinbäddning beter sig visningsprogrammet olika beroende på hur webbsidan ändrar storleken på behållaren DIV. Om webbsidan bara anger bredden på behållaren DIV, och dess höjd inte begränsas, väljer visningsprogrammet automatiskt höjden enligt proportionerna för resursen som används. Med den här funktionen kan du vara säker på att resursen passar perfekt in i vyn utan utfyllnad på sidorna. Det här användningsexemplet är det vanligaste för webbsidor med flexibla ramverk för webbdesign som Bootstrap och Foundation.

Om webbsidan ställer in både bredd och höjd för visningsprogrammets behållare DIV fyller visningsprogrammet bara det området och följer den storlek som anges i webbsidans layout. Ett bra exempel är att bädda in visningsprogrammet i en modal övertäckning, där storleken på övertäckningen anpassas efter webbläsarens fönsterstorlek.

Inbäddning med fast storlek

Du lägger till visningsprogrammet på en webbsida genom att göra följande:

  1. Lägga till visningsprogrammets JavaScript-fil på webbsidan.

  2. Definierar behållaren DIV.

  3. Anger visningsprogrammets storlek.

  4. Skapa och initiera visningsprogrammet.

  5. Lägga till visningsprogrammets JavaScript-fil på webbsidan.

    Om du vill skapa ett visningsprogram måste du lägga till en script-tagg i huvudet HTML. Innan du kan använda visningsprogrammets API måste du ta med InterativeVideoViewer.js. Filen InteractiveVideoViewer.js finns under undermappen html5/js/ i din standarddistribution av IS-Viewer:

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js

Du kan använda en relativ sökväg om visningsprogrammet distribueras på någon av Adobe Dynamic Media Classic-servrarna och den hanteras från samma domän. Annars anger du en fullständig sökväg till en av Adobe Dynamic Media Classic-servrarna som har IS-Viewer installerat.

Den relativa sökvägen ser ut så här:

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
NOTE
Referera bara till JavaScript include-huvudvisningsfilen på din sida. Referera inte till några andra JavaScript-filer i webbsideskoden som kan hämtas av visningsprogrammets logik under körning. Referera inte direkt till HTML5 SDK Utils.js-biblioteket som läses in av visningsprogrammet från kontextsökvägen /s7viewers (s.k. konsoliderad SDK include). Orsaken är att platsen för Utils.js eller liknande visningsprogrambibliotek för miljön hanteras helt av visningsprogrammets logik och platsen ändras mellan visningsprogramversioner. Adobe sparar inte äldre versioner av det sekundära visningsprogrammet includes på servern.
Det innebär att om du skickar en direkt referens till eventuella sekundära JavaScript include som används av visningsprogrammet på sidan så bryts visningsprogrammets funktioner i framtiden när en ny produktversion distribueras.
  1. Definierar behållaren DIV.

    Lägg till ett tomt DIV-element på sidan där du vill att visningsprogrammet ska visas. Elementet DIV måste ha sitt ID definierat eftersom detta ID skickas senare till visningsprogrammets API. DIV har den storlek som anges via CSS.

    Platshållaren DIV är ett placerat element, vilket innebär att CSS-egenskapen position är inställd på relative eller absolute.

    För att helskärmsfunktionen ska fungera i Internet Explorer måste du kontrollera att det inte finns några andra element i DOM som har en högre staplingsordning än platshållaren DIV.

    Följande är ett exempel på ett definierat platshållarelement DIV:

    code language-html
    <div id="s7viewer" style="position:relative"></div>
    
  2. Ange visningsprogrammets storlek

    Du kan ange den statiska storleken för visningsprogrammet genom att antingen deklarera den för CSS-klassen .s7interactivevideoviewer på den översta nivån i absoluta enheter eller genom att använda modifieraren stagesize.

    Du kan ange storlek i CSS direkt på HTML-sidan. Eller så kan du lägga in den i en anpassad CSS-fil för visningsprogrammet, som sedan tilldelas en post för visningsförinställningar i Adobe Experience Manager Assets - On-demand, eller skickas explicit med kommandot style.

    Mer information om hur du formaterar visningsprogrammet med CSS finns i Anpassa visningsprogrammet för interaktiv video.

    Följande är ett exempel på hur du definierar en statisk visningsstorlek på HTML-sidan:

    code language-html
    #s7viewer.s7interactivevideoviewer {
     width: 640px;
     height: 640px;
    }
    

    Du kan ställa in modifieraren stagesize i posten för visningsförinställningar i Experience Manager Assets - On-demand. Eller så kan du skicka det explicit med initieringskoden för visningsprogrammet med samlingen params, eller som ett API-anrop enligt beskrivningen i avsnittet Kommandoreferens, så här:

    code language-html
    interactivevideoviewer.setParam("stagesize", "640,640");
    

    En CSS-baserad metod rekommenderas och används i det här exemplet.

  3. Skapa och initiera visningsprogrammet.

    När du har slutfört stegen ovan skapar du en instans av klassen s7viewers.InteractiveVideoViewer, skickar all konfigurationsinformation till konstruktorn och anropar metoden init() för en visningsprograminstans. Konfigurationsinformation skickas till konstruktorn som ett JSON-objekt. Det här objektet ska åtminstone ha fältet containerId, som innehåller namnet på visningsbehållar-ID och det kapslade JSON-objektet params med konfigurationsparametrar som stöds av visningsprogrammet.

    I det här fallet måste objektet params ha minst URL:en för bildservrar som skickas som egenskapen serverUrl och den ursprungliga resursen som parametern asset. Med det JSON-baserade initierings-API:t kan du skapa och starta visningsprogrammet med en enda kodrad, en URL för videoservern som skickas som videoserverurl-egenskap, en första resurs som asset-parameter och interaktiva data som interactivedata-egenskap. Med JSON-baserat initierings-API kan du skapa och starta visningsprogrammet med en enda kodrad.

    Det är viktigt att lägga till visningsprogrambehållaren i DOM så att visningsprogramkoden kan hitta behållarelementet med dess ID. I vissa webbläsare fördröjs skapandet av DOM tills webbsidan är slut. För maximal kompatibilitet anropar du metoden init() precis före den avslutande BODY -taggen eller på body onload() -händelsen.

    Dessutom är behållarelementet inte nödvändigtvis en del av webbsidans layout ännu. Den kan till exempel vara dold med formatet display:none som tilldelats den. I det här fallet skjuter visningsprogrammet upp initieringsprocessen tills webbsidan återför behållarelementet till layouten. Det som händer gör att visningsprogrammet laddas igen automatiskt.

    Följande är ett exempel på hur du skapar en visningsprograminstans, skickar de minsta nödvändiga konfigurationsalternativen till konstruktorn och anropar metoden init(). Exemplet förutsätter följande:

    • Visningsprograminstansen är interactiveVideoViewer.
    • Platshållarens DIV namn är s7viewer.
    • URL:en för bildservrar är https://aodmarketingna.assetsadobe.com/is/image/.
    • Videoserverns URL är https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna.
    • Innehålls-URL är https://aodmarketingna.assetsadobe.com/.
    • Resursen är /content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4.
    • Interaktiva data är is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt.
    code language-html
    <script type="text/javascript">
    var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
     "containerId":"s7viewer",
    "params":{
     "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
    "config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
     "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
     "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
     "contenturl":"https://aodmarketingna.assetsadobe.com/",
    "interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
    }
    }).init();
    </script>
    

    Följande kod är ett komplett exempel på en enkel webbsida som bäddar in den interaktiva videovisaren med fast storlek:

    code language-html
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
    <style type="text/css">
    #s7viewer.s7interactivevideoviewer {
     width: 640px;
     height: 480px;
    }
    </style>
    </head>
    <body>
    <div id="s7viewer" style="position:relative;"></div>
    <script type="text/javascript">
    var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
     "containerId":"s7viewer",
    "params":{
     "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
    "config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
     "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
     "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
     "contenturl":"https://aodmarketingna.assetsadobe.com/",
    "interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
    }
    }).init();
    </script>
    </body>
    </html>
    

Responsiv designinbäddning med obegränsad höjd

Med responsiv designinbäddning har webbsidan vanligtvis någon typ av flexibel layout på plats som bestämmer körningsstorleken för visningsprogrammets behållare DIV. I följande exempel antar du att webbsidan tillåter att visningsprogrammets behållare DIV tar 40 % av webbläsarens fönsterstorlek, vilket gör att höjden inte begränsas. Webbsidans HTML-kod ser ut så här:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

Att lägga till visningsprogrammet på en sådan sida liknar stegen för inbäddning med fast storlek. Den enda skillnaden är att du inte behöver definiera visningsprogrammets storlek explicit.

  1. Lägga till visningsprogrammets JavaScript-fil på webbsidan.
  2. Definierar behållar-DIV.
  3. Skapa och initiera visningsprogrammet.

Alla steg ovan är desamma som med inbäddning med fast storlek. Lägg till behållar-DIV i befintlig DIV för "holder". Följande kod är ett komplett exempel. Lägg märke till hur visningsprogrammets storlek ändras när webbläsarens storlek ändras och hur visningsprogrammets proportioner matchar resursen.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
"config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
 "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
 "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
 "contenturl":"https://aodmarketingna.assetsadobe.com/",
"interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
}
}).init();
</script>
</body>
</html>

Följande exempelsida visar mer verkliga användningsområden för responsiv designinbäddning med obegränsad höjd:

Live-demos

Alternativ demoplats

Responsiv inbäddning med definierad bredd och höjd

Om det finns responsiv inbäddning med bredd och höjd definierad är webbsidans format annorlunda. Den ger DIV:n "holder" båda storlekar och centrerar den i webbläsarfönstret. Webbsidan anger också storleken på elementen HTML och BODY till 100 procent.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

Resten av inbäddningsstegen är identiska med stegen som används för responsiv inbäddning med obegränsad höjd. Följande exempel visas:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
"config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
 "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
 "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
 "contenturl":"https://aodmarketingna.assetsadobe.com/",
"interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
}
}).init();
</script>
</body>
</html>

Bädda in med Setter-baserat API

I stället för att använda JSON-baserad initiering kan du använda set-based API och no-args-konstruktor. Om du använder den här API-konstruktorn används inga parametrar och konfigurationsparametrar anges med API-metoderna setContainerId(), setParam() och setAsset() med separata JavaScript-anrop.

I följande exempel visas hur du använder inbäddning med fast storlek med det inställningsbaserade API

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<style type="text/css">
#s7viewer.s7interactivevideoviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer();
interactiveVideoViewer.setContainerId("s7viewer");
interactiveVideoViewer.setParam("config", "/etc/dam/presets/viewer/Shoppable_Video_Dark");
interactiveVideoViewer.setParam("serverurl", "https://aodmarketingna.assetsadobe.com/is/image/");
interactiveVideoViewer.setParam("videoserverurl", "https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna");
interactiveVideoViewer.setParam("contenturl", "https://aodmarketingna.assetsadobe.com/");
interactiveVideoViewer.setParam("interactivedata", "is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt");
interactiveVideoViewer.setAsset("/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4");
interactiveVideoViewer.init();
</script>
</body>
</html>
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8