交互式视频

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

视频结束时，将显示所有产品的可视摘要，以促进行动动员。 客户还有机会点按所需的项目。 像这样的可操作特定体验可以提高客户参与度和转化率。

另请参阅 交互式图像.

交互式视频的实际操作情况

要查看交互式购物视频的实际操作情况，请单击 实时演示，滚动到 购物媒体 标题，然后单击购物视频。

• 在播放过程中，由于视频中使用了产品，因此相同的产品会以缩略图的形式显示在右侧。

• 如果要暂停视频并打开产品概览，请单击缩略图。 例如，单击视频中的KitchenAid缩略图图像可体验混合器的360度旋转视图，或放大以查看混合器详细信息。

从交互式购物视频中捕获的视频帧。

观看如何创建交互式视频

在 交互式视频的创建方式 🔗. （7分30秒）尽管视频演练使用Assets（按需）进行标记，但相关原则和步骤仍适用于Adobe Experience Manager Assets中的交互式视频。

Adobe客户成功网络研讨会

“在Experience Manager Assets中使用交互式视频、链接共享和YouTube共享”网络研讨会将向您讲授如何使用交互式视频和其他功能，将转化驱动的事件绑定到视频营销内容中。

快速入门：交互式视频

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

查找 示例 标题。 它包含一个基于此起始演示网页的简短教程，该网页 不 还增加了交互性：

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

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

当您完成上一个示例部分中的教程后，具有完全集成的交互式视频的最终演示网页如下所示：

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

交互式视频工作流：

1. （可选）识别概览变量 — 首先，识别现有概览实施所使用的动态变量。 在创建交互式视频时，您可以使用变量将产品缩略图映射到其相应的产品概览。 请参阅 （可选）识别概览变量.

   仅当满足以下所有条件时，才需要执行此步骤:

   • 您希望通过触发概览来为视频添加交互性。
   • 您的Experience Manager实施可以 not 使用电子商务集成框架，将产品数据从任何电子商务解决方案(如IBM® WebSphere® Commerce、Elastic Path、hybris或Intershop)提取到Experience Manager中。 请参阅 Experience Manager Assets中的电子商务概念.

2. （可选）创建交互式视频查看器预设 — 自定义构成播放器的各种组件的外观和行为，如视频清理器和交互式缩略图。

   如果您打算使用现成的交互式视频查看器预设，则无需创建您自己的交互式视频查看器预设 Shoppable_Video_Light 或 Shoppable_Video_Dark 中。
   请参阅 创建新查看器预设 （可选）和 创建交互式查看器预设的特殊注意事项.

3. 上传视频及其关联的图像资产 — 上传您要实现交互的视频和关联图像。

   请参阅 上传视频及其关联的缩略图资产.

4. 为视频添加交互性 — 向视频添加一个或多个时间区段。 然后，关联这些时间区段中的图像缩略图。 将每个图像缩略图分配给操作，如超链接、概览或体验片段。

   (如果您的交互式内容包含链接相对URL的链接，特别是指向Experience Manager Sites页面的链接，则无法使用基于URL的链接方法。)

   最后，发布交互式视频资产。 发布后会创建嵌入代码或URL，您最终会将该嵌入代码或URL复制并应用到您的网站登录页面。 请参阅 为视频添加交互性.

   请参阅 发布资产.

5. 以Experience Manager将交互式视频添加到您的网站或您的网站

   如果您使用Experience Manager Sites或Experience Manager电子商务，或者同时使用这两种方式，则可以通过将交互式媒体组件拖动到页面上，将交互式视频直接添加到Experience Manager中的网页。 请参阅 将Dynamic Media Assets添加到页面.

   使用嵌入代码或URL将交互式视频与您的网站体验相集成。 请参阅 将交互式视频与您的网站集成.

   如果您使用的是第三方WCM（Web内容管理器），则必须将新的交互式视频与您网站上使用的现有概览实施相集成。 请参阅 将交互式视频与现有概览集成.

（可选）识别概览变量

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

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

必须正确识别唯一触发产品概览所需的变量。

有时，咨询负责现有概览实施的IT专家可能已足够。 他们可能知道在系统中识别概览所需的最少数据集。 但是，可以简单地分析前端代码的现有行为。

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

• 用户在网站上激活用户界面元素。例如，单击 概览 按钮。
• 如果需要，网站会向后端发送Ajax请求以加载概览数据或内容。
• 概览数据会转换为内容，以准备在网页上渲染。
• 最后，前端代码以可视方式将此类内容呈现在屏幕上。

因此，方法是访问现有网站中实施了快速视图的不同区域，触发快速视图，并捕获网页发送的用于加载快速视图数据或内容的Ajax URL。

通常，您无需使用任何专门的调试工具。 现代的Web浏览器配备了Web检查器，可以做到充分的工作。 以下是一些包括Web检查器的Web浏览器示例：

• 要在Google Chrome中查看所有传出HTTP请求，请使用键盘快捷键 F12 (Windows)或 Command + Options + I (Mac)打开 开发人员工具 ，然后单击 网络 选项卡。

• 在Mozilla Firefox中，您可以使用键盘快捷键激活Firebug插件 F12 (Windows)或 Command + Options + I (Mac)及使用其 Net 选项卡，或者使用内置的检查器工具及其“网络”选项卡。

• 在Internet Explorer中，通过按 F12.

在浏览器中打开网络监控时，会触发页面上的概览。

现在，在网络日志中找到Quickview Ajax URL，并复制记录的URL以供将来分析。 通常，在触发概览时，会向服务器发送大量请求。 通常，Quickview Ajax URL是列表中最先使用的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?lang=zh-Hans

激活页面上所有可用的产品概览后，您会收到向后端发出的概览请求列表：

• 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

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

• 第一种是蜡烛、垫子、家具和玻璃器皿。 您可以将此类别称为“产品”。
• 第二种类型是产品代码，如233916597。 您可以假定它是“产品SKU”。

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

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

根据这种分析，您可以得出结论，将以下两个变量用于缩略图： categoryId 和 SKU.

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

（可选）创建交互式视频查看器预设

如果您打算使用默认的现成交互式视频查看器预设类型(称为 Shoppable_Video_dark 或 Shoppable_Video_light.

在创作环境中单击缩略图时，将预览 概览 对话框。

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

交互式视频查看器预设可正确呈现您添加的视频和所有时间轴区段。 当您在 预览 模式，以便在发布之前测试其交互性。

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

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

上传视频及其关联的缩略图资产

如果您已上传视频和缩略图资产，请继续 为视频添加交互性.

如果您上传了错误的视频或图像，或者想要删除不再需要的已上传视频或图像，请参阅 删除资产.

要上传视频及其关联的缩略图资产，请执行以下操作：

1. 将视频和关联的缩略图资产上传到所需的文件夹。

   请参阅 上传资产.

   请参阅 使用FTP作业计划功能上传资产.

   现在，可为您的视频添加交互性。

为视频添加交互性

使用“创建交互式视频”页面上的就地可视编辑器，将时间轴区段添加到视频。

添加时间轴区段后，您可以在每个区段内添加缩略图。 对于您添加的每个缩略图，您都应用一个操作。 例如，您可以将概览应用到缩略图，也可以为其分配超链接或体验片段。

请参阅 体验片段.

撤消 和 重做 在当前创建/编辑会话期间，支持页面右上角附近的选项。

保存交互式视频后，该视频会立即打开到“预览”中。 从此处，您可以选择交互式视频查看器预设并播放视频，以大致了解它如何显示给客户。

为视频添加交互性：

1. 在“资产”视图中，导航到您上传并要进行交互的视频。

2. 执行下列操作之一：

   • 将鼠标悬停在图像上，然后点按 选择 （复选标记图标）。 在工具栏中，点按 编辑.
   • 将鼠标悬停在图像上，然后点按 更多操作 （三个点图标）> 编辑.
   • 点按图像，以便在“详细信息视图”页面中将其打开。 在工具栏中，点按 编辑.

3. 在 创建交互式视频 ，请执行以下任一操作：

   • 点按 播放 按钮来播放视频。 当您要突出显示的特定产品、服务或详细信息进入视图时，点按 添加区段 中。 重复上述步骤，直到视频结束。

     对于您添加的每个时间区段，向其分配一个或多个缩略图，然后将这些缩略图关联到概览产品页面以供客户购买，或关联到网页以了解更多信息。

   • 点按 播放 按钮来播放视频。 当您要突出显示的特定产品、服务或详细信息进入视图时，点按 暂停. 点按 添加区段.

     继续播放视频，并在要添加区段的时间轴点处暂停视频，直到视频结束。

4. （可选）将 时间轴缩放滑块 向左放大或向右缩小。 这样，您就可以控制您看到的有关已添加区段的详细信息量。

   

   根据您的视频长度， 区段持续时间 默认值为以下值：

   如果视频长度为……	区段持续时间设置默认为……
   3分钟或更多	60 秒
   2-3分钟	30 秒
   1-2 分钟	20秒
   30-60秒	10 秒
   30秒或更少	5 秒

   视频时间轴使用的屏幕空间与其可用的空间大小相同。 因此，在调整浏览器大小时，您添加的区段会保持其正确的宽度。

   为了说明这一点，以下三个屏幕截图使用的是同一视频。 请注意，每个区段的宽度会根据 时间轴缩放 设置。

   

   屏幕截图A

   屏幕截图上方的A显示了29秒产品视频的默认视图。 的 时间轴缩放 设置为默认的5秒。

   

   屏幕截图B

   在上面的屏幕截图B中， 时间轴缩放 滑块从默认的5秒拖到3秒。 请注意， 时间轴缩放 时间戳现在全部以3秒为间隔设置。

   

   屏幕截图C

   在上面的屏幕截图C中， 时间轴缩放 设置已移至8秒。 请注意包含产品缩略图的区段是如何缩小的。 如果您的视频较长，并且希望能够看到通常适合页面宽度的更多区段的概述，则以这种方式缩小会非常有用。

5. （可选）执行以下任一操作：

   • 调整区段的开始时间和结束时间。

     选择一个区段，然后拖动前导或尾随的蓝色椭圆以分别调整开始或结束时间。 显示的视频帧会根据您的调整，移动到视频中的适当时间。 时间轴区段的移动受时间轴中任何相邻区段的限制。 允许的最短区段时间为1秒。

     使用以下导航快捷键可快速检查和微调您的视频区段：

     • 如果要直接将视频搜寻到该区段的开头，请点按蓝色前导椭圆。
     • 如果要直接将视频搜寻到该区段的结尾，请点按尾随的蓝色椭圆。
     • 如果要将视频播放返回到该区段的开头，请点按整个区段

   

   重新定位时间轴区段的结尾

   • 删除区段

     选择时间轴上的最后一个区段，然后在工具栏中，点按 删除区段. 如果选择了两个或更多区段，则 删除区段 功能被禁用。

     您只能删除最后一个区段。 例如，如果您要删除时间轴上的所有区段，则必须始终选择最后一个区段，然后点按 删除区段.

6. 选择要将一个或多个缩略图图像关联到的时间区段。

7. 在视频的右侧，点按 内容 选项卡。

8. 在 内容 选项卡，点按 选择资产，然后浏览并选择您要在视频中使用的所有图像资产。 选定的资产会添加到 资产选择器 面板 内容 选项卡。

9. 在“内容”选项卡下方的资产选择器中，执行以下任一操作：

   将缩略图与选定的时间轴区段关联	点按右侧资产选择器面板中的图像。 您可以向时间轴区段添加任意所需数量的缩略图。 对于您选择的每个图像，资产选择器中的图像上方会显示一个复选标记。
   从选定的时间轴区段中删除缩略图	执行以下任一操作： 在资产选择器面板中，点按带有复选标记的图像以取消选择该图像。 图像资产将从时间轴区段中删除。 在选定的时间轴区段中，点按图像，然后在工具栏中，点按 删除产品.

   

   点按资产选择器面板中的图像，会将其添加到选定的时间轴区段。

10. 在其中一个时间轴区段内选择单个缩略图，然后点按 操作 选项卡。

11. 执行以下任一操作：

    <

    将选定的缩略图图像与概览相关联	在操作类型下，点按 概览. 如果您是Experience Manager Sites和Ecommerce客户： 请注意，“SKU值”文本字段中已预填充选定产品的SKU（库存单位），该SKU是您提供的每个不同产品或服务的唯一标识符。 当图像与Experience Manager商务中的产品关联时，将自动填充此字段。 如果预填充的SKU不正确，请点按或单击产品选取器图标（放大镜）以打开选择产品页面。 点按或单击要使用的产品，然后点按页面右上角的复选标记，以便您可以返回到交互式视频编辑器。 如果您 not Experience Manager Sites或电子商务客户 请参阅 识别热点变量. 您必须定义这些变量。 默认情况下，此SKU字段会使用图像资产的文件名（不带扩展名）。 如果您对基于SKU的文件遵循标准命名约定，则文件通常不需要进行任何额外的编辑。 否则，请编辑默认值并输入正确的SKU值。 在“SKU值”文本字段中，键入产品的SKU（库存单位），即您提供的每个不同产品或服务的唯一标识符。 输入的SKU值会自动填充概览模板的变量部分，以便系统能够将点按的图像与特定SKU的概览相关联。 （可选）如果概览中有其他变量必须使用才能进一步识别产品，请点按 添加常规变量. 在文本字段中，指定一个额外的变量。 例如， category=Womens 是添加的变量。
    将选定的缩略图图像与超链接关联	在操作类型下，点按 超链接，然后执行下列操作之一： 如果您是Experience Manager Sites客户，请点按站点选择器图标（文件夹）以导航到网页。 如果您的交互式内容具有包含相对URL的链接，特别是指向Experience Manager Sites页面的链接，则无法使用基于URL的链接方法。 如果您是独立的Dynamic Media客户，请在“HREF”文本字段中，指定链接网页的完整URL路径。 请确保指定是在新的浏览器选项卡中还是在当前选项卡中打开链接。
    将选定的缩略图图像与体验片段关联	在操作类型下，点按 体验片段，然后执行以下操作： 如果您是Experience Manager Sites客户，请点按或单击搜索图标（放大镜）以打开体验片段页面。 点按或单击要使用的体验片段，然后点按 选择 ，以便您可以返回到上一页的“操作”面板。 请参阅 体验片段. 指定在视频上显示的体验片段的宽度和高度。 注意:在体验片段中嵌入查看器时，不支持交互式视频中的社交媒体共享工具。 要解决此问题，您可以使用或创建没有社交媒体共享工具的查看器预设。 通过此类查看器预设，您可以成功将其嵌入到体验片段中。
    编辑已分配给缩略图的操作	在时间轴区段中，点按文本标签右侧带有链式链接的缩略图。 链式链接表示已为其分配操作。 点按 操作 选项卡，以便进行更改。
    更改缩略图的文本标签	默认情况下，文本标签使用缩略图的 Title 元数据字段。 如果 Title 不存在，则会使用缩略图的文件名，但不使用扩展名。 要更改缩略图的文本标签，请在 操作 选项卡中，输入所需文本。 请参阅下面的屏幕截图。 新文本标签仅供视频播放器本身以及时间轴区段中显示的缩略图文本使用。 标签更改不会影响缩略图的标题元数据字段及其文件名。
    如果要还原您所做的更改，	在页面的右上角附近，点按 撤消 或 重做.

    

    缩略图图像中会添加新的文本标签。

12. 执行下列操作之一：

    • 重复步骤6-11，向视频中的时间轴区段添加更多缩略图。
    • 继续执行可选步骤13。

13. （可选）执行以下任一操作：

    • 合并区段 — 您可以将两个相邻的区段（无论是否分配了产品缩略图）合并到一个区段中。

      在时间轴上，点按要合并到一个中的两个或多个连续区段。 下面屏幕截图中的两个选定区段上没有蓝色的椭圆拖动手柄。

      点按 合并区段 中。
      

    将两个选定的五秒区段合并为一个十秒区段。

    • 拆分区段 — 您可以将一个区段划分为两个同等时间的区段。 如果已将产品缩略图分配给区段，则缩略图会合并到左侧区段中。

      在时间轴上，点按要分成两半的区段，然后点按 拆分区段 中。

      选择两个或更多区段会禁用 拆分区段 功能。
      

    将选定的10秒区段拆分为两个区段，每个区段为5秒。

14. 在 创建交互式视频 页面，则会显示与视频一起使用的当前选定查看器预设的名称。 如果要选择其他查看器预设，请点按名称。

    例如， Shoppable_Video_light 查看器预设允许您在视频旁边显示一个白色显示区域来播放视频。 在显示区域，可单击的缩略图图像会在播放期间显示。 的 Shoppable_Video_dark 查看器预设允许您在视频旁边显示一个黑色显示区域来播放视频。

    如果您创建了自己的交互式视频查看器预设，则还会在可供选择的预设列表中看到该预设。

    完成后，点按 保存.

    注意

    在保存交互式视频时，会自动保存 .vtt 一个关联的文件。 的 .vtt 文件已保存到 _VTT 的根文件夹 资产. 要在网站上正确播放交互式视频，必须填写文件和文件夹。 因此，请勿移动、编辑或删除文件夹 _VTT 或其内容。

15. 发布交互式视频。 发布后会创建嵌入代码或URL，您最终会将该嵌入代码或URL复制并粘贴到您的网站体验中。

    如果您使用概览添加交互性，则仅使用嵌入代码；如果您通过超链接的网页添加了交互性，则还可以使用已发布的URL。 但是，请注意，如果您的交互式内容具有链接相对URL的链接，特别是指向Experience Manager Sites页面的链接，则无法使用基于URL的链接方法。

    请参阅 发布资产.

    注意

    要发布带有概览的购物视频，请确保您还会从商务区域单独发布每个视频的相关图像资产。

    添加时间轴区段并发布交互式视频后，您便可以将其添加到现有网站登录页面。 请参阅 将交互式视频与您的网站集成.

发布交互式视频资产

请参阅 发布资产 有关如何发布交互式视频资产的详细信息。

将交互式视频与您的网站集成

现在，在您上传视频、向其添加时间轴区段并发布交互式视频后，您便可以将其添加到现有网站。

如果您是Experience Manager Sites客户，则可以通过将交互式媒体组件拖动到您的页面来添加交互式视频。 请参阅 将Dynamic Media Assets添加到页面.

如果您是独立的Experience Manager Assets客户，则可以按照此部分中的所述，手动将交互式视频添加到您的网站。

要将交互式视频与您的网站集成，请执行以下操作：

1. 复制已发布的交互式视频的嵌入代码或URL。

   请参阅 在网页上嵌入视频查看器或图像查看器.

   如果您使用概览添加交互性，则仅使用嵌入代码；如果您通过超链接的网页添加了交互性，则还可以使用已发布的URL。 但是，请注意，如果您的交互式内容具有链接相对URL的链接，特别是指向Experience Manager Sites页面的链接，则无法使用基于URL的链接方法。

2. 在目标的网页代码中，识别静态视频所在的位置。

3. 删除静态视频，并将该代码原样替换为您从Experience Manager Assets复制的嵌入代码或URL。

   复制的嵌入代码是为响应式环境设置的，因此它应该自动适应之前由静态视频占用的区域。

示例

以演示网站为例：

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=zh-Hans?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?lang=zh-Hans

将交互式视频与现有概览集成

此过程的最后一步是将交互式视频与网站上使用的现有概览实施相集成。 没有适用于所有情况的集成解决方案。 每个概览实施都是唯一的。 因此，需要一种具体的方法，需要前端IT人员的协助。

现有的概览实施通常表示在网页上发生的一系列相互关联的操作，这些操作按以下顺序发生：

1. 用户在网站的用户界面中触发一个元素。
2. 前端代码根据在步骤1中触发的用户界面元素来获取概览URL。
3. 前端代码使用步骤2中获取的URL发送AJAX请求。
4. 后端逻辑会将相应的概览数据或内容返回到前端代码。
5. 前端代码加载概览数据或内容。
6. 或者，前端代码会将加载的概览数据转换为HTML表示。
7. 前端代码显示一个模态对话框或面板，并在屏幕上为最终用户呈现HTML内容。

这些调用可能不代表独立的公共API调用，网页逻辑可以从任意步骤调用这些调用。 相反，它是一个链式调用，其中每个后续步骤都会隐藏在上一步的最后一个阶段（回调）中。

在交互式视频替换步骤1和部分步骤2的同时，当用户单击交互式视频内的缩略图时，此类用户交互由查看者处理。 查看器会向网页返回一个事件，其中包含之前添加到Experience Manager的所有缩略图数据。

在此类事件处理程序中，前端代码会执行以下操作：

• 监听交互式视频发出的事件。
• 根据缩略图数据构建概览URL。
• 触发从后端加载概览并在屏幕上呈现概览以供显示的过程。

此外，交互式视频查看器支持全屏操作模式。 最终用户通过单击缩略图而不离开全屏来触发概览。 要实现此功能，请更改前端代码，以便将“快速查看”模式对话框附加到查看器的容器。 请勿添加文档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
    //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>

因此，只需取消对上面突出显示的代码片段的注释，并将虚拟处理程序主体替换为特定网页的特定代码即可。

标准嵌入代码中存在两个默认回调处理程序： quickViewActivate 和 initComplete. 的 quickViewActivate 在查看器中单击缩略图时，处理程序会触发。 使用它将查看器与概览激活逻辑集成。 的 initComplete 处理程序仅在查看器加载到页面时触发一次。 此处理程序用于调整网页DOM中的“快速查看”对话框位置。

构建概览URL的过程与识别本主题前面介绍的缩略图变量的过程相反。 使用之前已识别的概览URL示例，您可以了解在每种情况下如何构建概览URL:

触发概览URL并激活概览面板的最后一步，很可能需要IT部门的前端IT人员的协助。 他们深知如何通过正确的步骤准确触发概览实施，从而拥有现成的概览URL。

您可以了解如何将这些步骤应用到演示网站，以便将交互式视频与概览代码完全集成。 在本主题的前面，快速视图URL的结构如下所示：

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

在 quickViewActivate 使用处理程序 categoryId 和 sku 字段 inData 通过查看器代码传递到处理程序的对象，如下所示：

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.

实际找到模态对话框元素并将其附加到上述容器的步骤具体因大小写而异。 再次重申，您可以向熟悉所需Quickview实施的前端开发人员寻求帮助。

对于示例网站，“快速查看”模式对话框以 DIV 并直接附加到文档的quickview-modal 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 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>

具有完全集成的交互式视频的最终演示网站如下所示：

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

使用概览创建自定义弹出窗口

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

Business.Adobe.com 资源

Ecommerce Integrations Targeted Content Content Intelligence Personalized Communications Content As A Service Digital Asset Management