交互式视频 interactive-videos

您可以轻松地创建交互式视频（也称为购物视频），以直接从视频推动转化。 客户与视频的互动发生在视频播放器旁边的面板中，在该面板中，相关服务、信息或产品缩略图会根据视频中的功能滚动到视图中。 客户可以选择缩略图并直接链接到服务，或者将项目添加到购物车以供立即购买，或者链接到网页以了解更多信息。

视频结束时，会显示所有产品的可视化摘要，以激发行动号召。 客户还有另一个机会选择所需的项目。 诸如此类的可操作且具体的体验可提高客户参与度和转化率。

另请参阅交互式图像。

交互式视频的实际操作情况 interactive-video-in-action

要查看交互式购物视频的实际操作情况，请选择实时演示，滚动到页面上的​ 购物媒体 ​标题，然后选择购物视频开始播放。

另请参阅在Dynamic Media中使用交互式视频

观看如何创建交互式视频 watch-how-interactive-videos-are-created

观看有关如何创建交互式视频的演练（7分30秒）。
(尽管视频演练使用Assets（按需）进行标记，但Adobe Experience Manager Assets中的交互式视频仍适用这些原则和步骤。)

Adobe客户成功网络研讨会 adobe-customer-success-webinar

Experience Manager Assets中的使用交互式视频、链接共享和YouTube共享网络研讨会教您如何使用交互式视频和其他功能将转化驱动型事件与视频营销内容关联起来。

快速入门：交互式视频 quick-start-interactive-videos

以下分步工作流描述旨在帮助您在Dynamic Media中快速启动和运行交互式视频。

在某些快速入门任务中查找​ Example ​标题。 它包含一个简短的教程，该教程基于此启动演示网页，尚未 ​添加交互功能。

示例 ​有助于说明在您的网站上集成交互式视频的步骤。

当您完成最后一个示例部分中的教程时，您的最终演示网页和完全集成的交互式视频将以这种方式显示。

交互式视频步骤：

（可选）标识概览变量 optional-identifying-quickview-variables

首先，标识现有Quickview实施使用的动态变量，以便您可以在交互式视频创建过程中将产品缩略图映射到其相应的产品Quickview。

向视频添加时间区段时，您需要为添加到区段的每个缩略图分配一个SKU（库存单位）和任何其他变量。 此类变量稍后用于显示正确的概览产品。

正确识别唯一触发产品概览所需的变量很重要。

有时，咨询负责现有Quickview实施的IT专家就足够了。 他们可能会知道系统中用于标识概览的最小数据集。 但是，可以简单地分析前端代码的现有行为。

大多数概览实施都使用以下范例：

因此，方法是访问实施Quickview的现有网站的不同区域。 然后触发概观，并获取网页发送的Ajax URL，用于加载概观数据或内容。

通常，您无需使用任何专门的调试工具。 现代Web浏览器的功能是Web检查器，这些检查器可以完成适当的工作。 以下是一些包含Web检查器的Web浏览器示例：

在浏览器中打开网络监视时，将触发页面上的快速视图。

现在，在网络日志中找到Quickview Ajax URL，并复制记录的URL以供将来分析。 通常，在触发概览时，会向服务器发送大量请求。 通常，快速视图Ajax URL是列表中的第一个页面之一。 它具有复杂的查询字符串部分或路径，并且其响应MIME类型为text/html、text/xml或text/javascript。

在此过程中，请务必访问网站的不同区域，以及不同的产品类别和类型。 原因是概览的URL具有给定网站类别共有的部分，但只有在访问网站的其他区域时才发生更改。

最简单的例子是，概观URL中的唯一变量部分是产品SKU。 在这种情况下，产品SKU值是向Experience Manager交互式视频中的时间段添加缩略图所需的唯一数据块。

但是，在复杂的情况下，除了产品SKU之外，快速视图URL还有不同的元素，例如类别ID和颜色代码。 在这种情况下，在Experience Manager的缩略图数据定义中，每个此类元素都会成为单独的变量。

请仔细研究一下以下概览实例URL及其生成的缩略图变量：

示例

将以上方法应用于示例网站后，您的网页具有多个产品缩略图，每个产品缩略图都有一个“了解更多”按钮：

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

激活页面上所有可用的产品快速视图后，您将获得向后端发出的概览请求列表：

查看服务器调用时，特定于产品的信息仅显示在请求路径中。 您还会注意到根本未使用查询字符串，并且其中涉及两种不同类型的数据段：

根据此信息，整个概览URL具有以下模式：

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

基于此类分析，您可以得出这样的结论：对于缩略图，可以使用以下两个变量： categoryId和SKU。

您现在可以上传视频及其关联的缩略图资产。

（可选）创建交互式视频查看器预设 optional-creating-an-interactive-video-viewer-preset

如果您打算使用默认的、现成的交互式视频查看器预设类型Shoppable_Video_dark或Shoppable_Video_light，则可以跳过此任务并继续执行下一个任务。

在创作环境中选择缩略图时，会显示“概览”对话框的预览。

您可以选择创建自己的自定义交互式视频查看器预设。 您可以确定视频播放器的样式、交互式缩略图以及视频末尾显示的缩略图网格视图等。

交互式视频查看器预设可正确呈现视频以及您添加的所有时间轴区段。 在“预览”模式下选择产品缩略图时，它还使用默认概览示例，以便您可以在发布之前测试其交互性。

保存查看器预设后，“查看器预设”页面中的查看器预设状态将自动设置为 开。此状态表明查看器预设在 Dynamic Media 组件中可见，预览视频时也可见。另请确保手动发布新查看器预设。

请参阅创建查看器预设以创建您自己的交互式视频查看器预设。

上传视频及其关联的缩略图资产 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-Hans

请注意，视频嵌入代码是标准代码：

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

将交互式视频与现有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处理程序将触发。 使用它可将查看器与概览激活逻辑集成。 当查看器加载到页面时，initComplete处理程序只触发一次。 此处理程序用于调整概览对话框在网页DOM中的位置。

构建概观URL的过程与标识本主题前面介绍的缩略图变量的过程相反。 使用之前标识的概览URL示例，您可以了解在各种情况下概览URL的构建方式：

触发概观URL和激活概览面板的最后一步很可能需要IT部门的前端IT人员的协助。 他们最了解如何从适当的步骤准确触发概览实施，并拥有现成的概观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()函数调用触发概览对话框。 此函数仅接受一个参数，即概览数据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-Hans

使用Quickview创建自定义弹出窗口® using-quickviews-to-create-custom-pop-ups

请参阅使用概览创建自定义弹出窗口®。