互動式影片 interactive-videos

您可以輕鬆建立互動式視訊（也稱為可購物視訊），並直接從視訊推動轉換。 客戶與影片互動於影片播放器旁的面板中進行，相關服務、資訊或產品縮圖會根據影片中的功能捲動至檢視畫面中。 客戶可以選取縮圖並直接連結至服務，或將專案新增至購物車以立即購買，或連結至網頁以取得詳細資訊。

影片結束時，會顯示所有方案的視覺化摘要，以激發行動號召。 客戶有另一個機會可選取他們想要的專案。 這類可操作且特定的體驗，可增加客戶參與度和轉換率。

另請參閱互動式影像。

互動視訊的實際運作情況 interactive-video-in-action

若要檢視互動式、可購物視訊的實際運作情況，請選取「即時示範」，捲動至頁面上的「可購物媒體」標題，然後選取可購物視訊以開始播放。

另請參閱搭配Dynamic Media使用互動視訊

觀看互動式視訊的建立方式 watch-how-interactive-videos-are-created

觀看互動式視訊建立方式的逐步解說（7分30秒）。
(雖然視訊逐步說明已加上Assets on Demand品牌，但Adobe Experience Manager Assets中的互動式視訊仍適用原則和步驟。)

Adobe客戶成功網路研討會 adobe-customer-success-webinar

在Experience Manager Assets中的使用互動式視訊、連結共用和YouTube共用網路研討會會教導您如何使用互動式視訊和其他功能，將轉換驅動事件連結到視訊行銷內容。

快速入門：互動式影片 quick-start-interactive-videos

下列逐步工作流程說明可協助您在Dynamic Media中快速啟動並執行互動式影片。

在部分快速入門工作中尋找​ 範例 ​標題。 它包含以此啟動示範網頁為基礎的簡短教學課程，其中​ 尚未 ​新增互動功能。

範例 可協助您說明 ，如何將互動式視訊整合在您自己的網站上。

當您完成最後一個範例區段中的教學課程時，您的最終示範網頁會以這個方式顯示，其中包含完全整合的互動式視訊。

互動視訊步驟：

（選用）識別快速檢視變數 optional-identifying-quickview-variables

首先，識別您現有Quickview實作所使用的動態變數，以便您可以在互動式視訊建立程式中將產品縮圖對應至其對應的產品Quickview。

當您新增時間區段至視訊時，會指派SKU （庫存單位）和任何其他變數至您新增至區段的每個縮圖。 這類變數稍後會用於顯示正確的Quickview產品。

請務必正確識別哪些變數需要以唯一方式觸發產品Quickview。

有時候，諮詢負責現有Quickview實作的IT專家就足夠了。 他們可能會知道在系統中識別Quickview的最小資料集。 但是，也可以只分析前端計畫碼的現有行為。

大部分的「快速檢視」實作都使用下列範例：

因此，方法就是造訪現有網站中實作Quickview的不同區域。 然後觸發Quickview，並取得網頁傳送的Ajax URL以載入Quickview資料或內容。

通常您不需要使用任何專門的偵錯工具。 現代的網頁瀏覽器配備能夠執行適當工作的網頁檢查器。 以下是一些包含網頁檢查器的網頁瀏覽器範例：

在瀏覽器中開啟網路監視時，會觸發頁面上的快速檢視。

現在，請在網路記錄檔中找到Quickview Ajax URL，並複製紀錄的URL以供日後分析。 通常當您觸發「快速檢視」時，會有許多要求傳送至伺服器。 通常，快速檢視Ajax URL是清單中的第一個專案。 它具有複雜的查詢字串部分或路徑，而且其回應MIME型別是text/html、text/xml或text/javascript。

在此過程中，請務必使用不同的產品類別和型別，造訪您網站的不同區域。 原因在於「快速檢視」URL具有指定網站類別的共同部分，但只有在您造訪網站的其他區域時才會變更。

最簡單的情況是，快速檢視URL中的唯一變數部分是產品SKU。 在此情況下，將縮圖新增至Experience Manager互動視訊中的時間區段時，只需要產品SKU值即可。

不過，在複雜的情況下，除了產品SKU之外，快速檢視URL還有不同的變數元素，例如類別ID和顏色代碼。 在這種情況下，每個這類元素在Experience Manager的縮圖資料定義中都會變成個別變數。

請考量下列快速檢視URL範例及其產生的縮圖變數：

範例

將上述方法套用至範例網站時，您的網頁會有數個產品縮圖，每個縮圖都有「檢視更多」按鈕：

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

啟用頁面上可用的所有產品快速檢視後，您會取得向後端發出的快速檢視請求清單：

檢視伺服器呼叫，產品專屬資訊只會顯示在請求路徑中。 您也會發現根本不會使用查詢字串，而且其中涉及兩種不同型別的資料片段：

根據此資訊，整個快速檢視URL的模式如下：

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

根據此類分析，您得出結論：您可以針對縮圖使用下列兩個變數： categoryId和SKU。

您現在已準備好上傳視訊及其相關縮圖資產。

（可選）建立互動式視訊檢視器預設集 optional-creating-an-interactive-video-viewer-preset

如果您打算使用預設的、現成可用的互動式視訊檢視器預設集型別Shoppable_Video_dark或Shoppable_Video_light，可以略過此工作並繼續下一個。

在製作環境中選取縮圖時，會出現「快速檢視」對話方塊的預覽。

您可以選擇建立自己的自訂互動式視訊檢視器預設集。 您可以決定視訊播放器的樣式、互動式縮圖，以及在視訊結尾顯示的縮圖格線檢視等。

互動式視訊檢視器預設集可正確轉譯您新增的視訊和所有時間軸區段。 當您在預覽模式中選取產品縮圖時，它也會使用預設快速檢視的範例，讓您在發佈之前測試其互動性。

儲存檢視器預設集後，其狀態會在「檢視器預設集」頁面中自動設為​ On ​。此狀態表示在動態媒體元件中及您使用它預覽視訊時，都可看到它。請確定您也手動發佈新的檢視器預設集。

請參閱建立檢視器預設集以建立您自己的互動式視訊檢視器預設集。

上傳視訊及其相關縮圖資產 uploading-a-video-and-its-associated-thumbnail-assets

如果您已上傳視訊和縮圖資產，請繼續進行新增互動功能至視訊。

若您上傳了錯誤的影片或影像，或要刪除您不再需要的已上傳影片或影像，請參閱刪除Assets。

若要上傳視訊及其相關縮圖資產：

將互動性新增至視訊 adding-interactivity-to-your-video

您可以使用「建立互動式視訊」頁面上的就地視覺編輯器，將時間軸區段新增至視訊。

新增時間軸區段後，您即可在每個區段內新增縮圖影像。 對於您新增的每個縮圖，您都會對其套用動作。 例如，您可以將快速檢視套用至縮圖、指派超連結至縮圖或體驗片段。

請參閱體驗片段。

在您目前的建立/編輯作業階段期間，支援頁面右上角附近的「復原」和「重做」選項。

儲存互動式視訊後，視訊會立即開啟預覽。 從那裡，您可以選取互動式視訊檢視器預設集並播放視訊，以檢視向客戶呈現的大致呈現方式。

若要在視訊中新增互動功能：

Publish互動式視訊資產 publishing-interactive-video-assets

如需如何發佈互動式視訊資產的詳細資訊，請參閱Publish Assets。

將互動式視訊與您的網站整合 integrating-an-interactive-video-with-your-website

上傳影片、新增時間軸區段及發佈互動式影片後，您現在就能將其新增至現有網站。

如果您是Experience Manager Sites客戶，可以將互動式媒體元件拖曳至頁面，以新增互動式視訊。 請參閱將Dynamic Media Assets新增至頁面。

如果您是獨立Experience Manager Assets客戶，可以手動將互動式視訊新增至您的網站，如本節所述。

範例

以示範網站為例：

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

請注意，視訊內嵌程式碼為標準版：

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

整合就像移除視訊內嵌程式碼，並從Experience Manager中將它取代為互動式視訊內嵌程式碼一樣簡單。 您可以在以下URL看到結果。 雖然它會顯示頁面上顯示的互動視訊，但尚未與現有的快速檢視整合：

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

將互動式視訊與現有的Quickview整合 integrating-an-interactive-video-with-an-existing-quickview

此程式的最後一步是將您的互動式視訊與網站上使用的現有Quickview實作整合。 整合沒有適用於所有情況的解決方案。 每個快速檢視實施都是獨一無二的。 因此，需要涉及前端IT人員協助的特定方法。

現有的快速檢視實施通常代表一連串在網頁上發生的相互關聯動作，其順序如下：

這些呼叫不代表網頁邏輯可從任意步驟呼叫的獨立公用API呼叫。 相反地，這是一種鏈結呼叫，下個步驟的每一個都會隱藏在上一個步驟的最後一個階段（回撥）。

在互動視訊取代步驟1及部分步驟2的同時，當使用者選取互動視訊內的縮圖時，這類使用者互動由檢視器處理。 檢視器會將事件傳回至包含先前新增至Experience Manager之所有縮圖資料的網頁。

在此類事件處理常式中，前端程式碼會執行下列動作：

此外，互動式視訊檢視器支援全熒幕操作模式。 使用者透過選擇縮圖而不離開全熒幕來觸發快速檢視。 若要實現此功能，請修改前端程式碼，以便將「快速檢視」強制回應對話方塊附加至檢視器的容器。 請勿新增當檢視器處於全熒幕模式時無法使用的檔案BODY或其他網頁元素。 執行此工作的程式碼會監聽另一個檢視器回呼，此回呼會在檢視器載入頁面後傳送。

Experience Manager傳回的內嵌程式碼已有現成的事件處理常式。 如下列醒目提示的程式碼片段所示，系統會將它標籤為已註解：

<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
    //See your quickviewer plugin for the quickview call
    },
"initComplete":function() {
    //--- Attach quickview pop-up to viewer container so pop-up works 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>

因此，只需取消註解上述醒目提示的程式碼片段，並將虛擬處理常式本文取代為特定網頁的專屬程式碼。

標準內嵌程式碼中存在兩個預設的回呼處理常式： quickViewActivate和initComplete。 在檢視器中選取縮圖時，就會觸發quickViewActivate處理常式。 使用它來整合檢視器與Quickview啟用邏輯。 檢視器載入頁面時，initComplete處理常式只會觸發一次。 此處理常式可用來調整快速檢視對話方塊在網頁DOM中的位置。

建構快速檢視URL的程式與識別本主題先前所述縮圖變數的程式相反。 使用先前識別的快速檢視URL範例，您可以檢視快速檢視URL在各種情況下的建構方式：

觸發「快速檢視」URL及啟動「快速檢視」面板的最後一個步驟，極有可能需要您IT部門的前端IT人員協助。 他們最瞭解如何透過適當的步驟準確觸發Quickview實施，並擁有現成的Quickview URL。

您可以檢視這些步驟如何套用至示範網站，以將互動式視訊與快速檢視程式碼完全整合。 在本主題的前面，快速檢視URL的結構識別如下：

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

透過inData物件中的categoryId與sku欄位（透過檢視器的程式碼傳遞至處理常式），在quickViewActivate處理常式中很容易重建此URL，如下所示：

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

示範網站正在使用簡單的loadQuickView()函式呼叫觸發Quickview對話方塊。 此函式僅接受一個引數，即快速檢視資料URL。 因此，整合互動式視訊的最後一步是將下列程式碼行新增到quickViewActivate處理常式：

loadQuickView(quickViewUrl);

最後，請確定您的「快速檢視」對話方塊已附加至檢視器的容器元素。 內嵌程式碼預設值提供實現此功能的範例步驟。 若要取得檢視器容器元素的參考，您可以使用下列幾行程式碼：

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

其中inner_container是檢視器所管理的DIV專案的參考。 您希望對話方塊成為該DIV的子項。

實際找到模型對話方塊元素並將其附加至上述容器的步驟會根據大小寫而定。 同樣地，您可以向熟悉您所需快速檢視實作的前端開發人員尋求協助。

對於範例網站，快速檢視強制回應對話方塊會實作為DIV，且快速檢視強制回應ID會直接附加至檔案BODY。 因此，將該對話方塊移至檢視器容器的程式碼會直接顯示如下：

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

完整的原始程式碼如下：

<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 pop-up to viewer container so pop-up works 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>

最後示範網站與完全整合的互動式視訊看起來如下所示：

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

使用Quickview建立自訂快顯視窗® using-quickviews-to-create-custom-pop-ups

請參閱使用Quickview建立自訂快顯視窗®。