交互式视频

您可以轻松地创建交互式视频，从而直接从视频中提高转化率。客户在视频播放器一侧的面板中与视频进行交互，根据视频展示的内容，相关的服务、信息或产品缩略图会滚动到客户的视线中。客户可以点按缩略图并直接链接到相应的服务，也可以将项目添加到购物车以立即购买，或者链接到某个网页以了解更多信息。

视频结束时，所有提供项目的可视汇总会显示出来以发出行动动员。客户还有其他机会点按所需的项目。像这样的可操作特定体验能够提高客户的参与度和转化率。

另请参阅交互式图像。

交互式视频实际操作情况

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

• 在播放过程中，当视频中使用产品时，相同的产品以缩略图图像的形式显示在右侧。

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

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

观看如何创建交互式视频

观看有关如何创建交互式视频的 7 分 30 秒视频演练🔗。

（虽然视频演练使用 Assets（按需）进行标记，但 AEM Assets 中的交互式视频仍适用这些原则和步骤。）

Adobe 客户成功网络研讨会

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

快速入门：交互式视频

下面的工作流分步说明旨在帮助您在 Dynamic Media 中快速设置并运行交互式视频。

请查找某些“快速入门”任务中的​示例​标题。它包含一个简短的教程，该教程基于此开始演示网页，其中​尚未​为其添加交互性：

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html

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

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

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-3.html

交互式视频工作流:

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

   请注意，仅当以下所有条件均为真时，才需要执行此步骤:

   • 您希望通过触发Quickviews来为视频添加交互性。
   • 您的AEM实施does not​使用eCommerce integration framework将产品数据从任何电子商务解决方案（如IBM Websphere Commerce、Elastic Path、hybris或Intershop）提取到AEM。 请参阅AEM Assets🔗中的电子商务概念。

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

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

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

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

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

   (请注意，如果您的交互式内容包含与相对URL(尤其是指向AEM Sites页面的链接)的链接，则无法使用基于URL的链接方法。)

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

   请参阅发布资产。

5. 将交互式视频添加到您的网站或AEM中的您的网站

   如果您使用AEM Sites或AEM eCommerce，或同时使用两者，则可以通过将交互式媒体组件拖动到页面上，将交互式视频直接添加到AEM中的网页。 请参阅将Dynamic Media资产添加到页面。

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

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

（可选）识别Quickview变量

如果您的AEM实施使用电子商务，则可以跳过此任务并继续到下一个任务。

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

在将时间区段添加到视频时，您需要为添加到区段的每个缩略图分配一个 SKU 及其他任何变量。以后会使用这些变量来显示正确的Quickview产品。

必须准确地识别唯一触发产品概览所需的变量，这一点很重要。

有时可能需要向负责现有Quickview实施的IT专家咨询。 他们可能了解在系统中识别Quickview所需的最少数据集。 但在大多数情况下，可能只需简单地分析前端代码的现有行为即可。

大多数Quickview实施采用以下模式：

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

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

通常情况下，您不需要使用任何专业的调试工具。现代的 Web 浏览器具备 Web 检查器，可以实现相同的功能。下面列举了一些具备 Web 检查器的 Web 浏览器：

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

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

• 在Internet Explorer中，通过按F12激活调试器工具。

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

现在，在网络日志中找到Quickview Ajax URL，并复制记录的URL以供将来分析。 在大多数情况下，触发Quickview时，会有许多请求发送到服务器。 通常，Quickview Ajax URL是列表中第一个。 它具有复杂的查询字符串部分或路径，其响应MIME类型为text/html、text/xml或text/javascript。

在此过程中，访问网站中具有不同产品类别和类型的不同区域非常重要。 原因是，Quickview URL可能具有特定网站类别的通用部分，但仅在您访问网站的其他区域时更改。

在最简单的情况下，Quickview URL中唯一的变量部分是产品SKU。 在这种情况下，产品SKU值是向AEM中交互式视频中的某个时间区段添加缩略图时唯一需要的数据。

但是，在复杂情况下，Quickview URL除了产品SKU之外还具有不同的可变元素，如类别ID、颜色代码等。 在这种情况下，每个此类元素都会在AEM的缩略图数据定义中成为一个单独的变量。

请考虑以下Quickview URL及其生成的缩略图变量示例：

示例

将上述方法应用于示例网站时，我们有一个包含许多产品缩略图的网页，每个缩略图都有一个​SEE MORE​按钮：

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html

在激活页面上所有可用的产品概览后，您将获得对向后端发出的概览请求的以下列表:

• 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”。

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

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

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

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

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

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

在创作环境中单击缩略图时，将显示​Quickview​对话框的预览。

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

交互式视频查看器预设能够准确地呈现您添加的视频和所有时间轴区段。在​预览​模式下单击产品缩略图时，它还会使用默认概览示例，这样您就可以在发布前测试其交互性。

在保存查看器预设后，查看器预设的状态会在“查看器预设”页面中自动设置为​开启。该状态意味着无论您何时预览视频，都可以在 Dynamic Media 组件中看到该查看器预设。​​另请确保手动发布新查看器预设。

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

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

如果您已经上传了视频和缩略图资产，请继续执行向视频添加交互性。

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

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

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

   请参阅上传资产。

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

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

为视频添加交互性

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

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

请参阅体验片段。

在当 前 ​​的创建/编辑会话中，页面右上角附近支持“撤消和重复选项”。

在保存交互式视频后，视频会立即在预览中打开。从中，您可以选择交互式视频查看器预设并播放视频，大致了解交互式视频将如何呈现给客户。

为视频添加交互性:

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

2. 执行下列操作之一：

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

3. 在​创建交互式视频​页面上，执行下列任一操作：

   • 点按​播放​按钮以开始播放视频。当视频中出现您要突出显示的特定产品、服务或详细信息时，点按工具栏中的​添加区段。重复上述步骤，直到视频结束。

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

   • 点按​播放​按钮以开始播放视频。当视频中出现您要突出显示的特定产品、服务或详细信息时，点按​暂停。点按​添加区段。

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

4. （可选）向左拖动​时间轴缩放滑块​上的栏可放大（向右拖动则缩小），从而控制您看到的已添加区段的详细信息量。

   

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

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

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

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

   

   屏幕截图A

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

   

   屏幕截图B

   在上面的屏幕截图B中，将​时间轴缩放​滑块从默认的5秒到3秒拖动。 请注意，单个​时间轴比例​时间戳现在都以3秒的间隔设置。

   

   屏幕截图C

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

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

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

     选择一个段，然后拖动前导或尾部蓝色椭圆以分别调整开始或结束时间。 显示的视频帧会根据您的调整，移动到视频中的相应时间。时间轴区段的移动会受到时间轴中任意相邻区段的限制。最少允许区段有一秒钟的时长。

     可使用以下导航快捷方式快速地查看和微调视频区段：

     • 点按前导蓝色椭圆，将视频直接搜索到该区段的开头。
     • 点按尾部蓝色椭圆，将视频直接搜索到该区段的末尾。
     • 点按整个区段，使视频播放返回到该区段的开头。

   

   调整时间轴区段结尾的位置

   • 删除区段

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

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

6. 选择您要为其关联一个或多个缩略图的时间区段。

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

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

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

   将缩略图关联到选定的时间轴区段	点按右侧“资产选择器”面板中的图像。 您可以向时间轴区段中添加任意所需数量的缩略图。对于您选择的每个图像，资产选择器中相应图像的上方便会出现一个对勾标记。
   将缩略图从选定的时间轴区段中删除	执行以下操作之一： 在“资源选择器”面板中，点按带有复选标记的图像以取消选择它。 图像资产将从时间轴区段中删除。 在选定的时间轴区段中，点按一幅图像，然后点按工具栏中的删除产品。

   

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

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

11. 执行以下操作之一：

    <>

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

    

    新文本标签会添加到缩略图。

12. 执行下列操作之一：

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

13. （可选）执行下列操作之一：

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

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

      点按工具栏上的​合并区段。
      

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

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

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

      选择两个或多个段将禁用​拆分段​功能。
      

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

14. 在​创建交互式视频​页面的右上角附近，将显示与视频一起使用的当前选定查看器预设的名称。 点按名称以选择其他查看器预设。

    例如，Shoppable_Video_light 查看器预设能够让您在播放视频时，在视频旁边留出一个白色显示区域。该显示区域用于在播放视频时，显示可点击的缩略图。Shoppable_Video_dark 查看器预设则能够让您在播放视频时，在视频旁边留出一个黑色显示区域。

    如果您创建了自己的交互式视频查看器预设，您还将在预设列表中看到该预设，您可以从中进行选择。

    完成后，点按​保存。

    注意

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

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

    如果使用Quickviews添加交互性，则仅使用嵌入代码；如果您是通过超链接的网页添加交互性的，则还可以使用已发布的URL。 但是，请注意，如果您的交互式内容包含与相对URL(尤其是指向AEM Sites页面的链接)的链接，则无法使用基于URL的链接方法。

    请参阅发布资产。

    注意

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

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

发布交互式视频资源

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

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

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

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

如果您是独立的AEM Assets客户，则可以按本节所述手动将交互式视频添加到您的网站。

要将交互式视频集成到您的网站:

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

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

   如果使用Quickviews添加交互性，则仅使用嵌入代码；如果您是通过超链接的网页添加交互性的，则还可以使用已发布的URL。 但是，请注意，如果您的交互式内容包含与相对URL(尤其是指向AEM Sites页面的链接)的链接，则无法使用基于URL的链接方法。

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

3. 删除静态视频，并将其代码原封不动地替换为您从 AEM Assets 中复制的嵌入代码或 URL。

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

示例

以演示网站为例：

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html

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

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

集成过程很简单，只需删除视频嵌入代码，然后将其替换为AEM中的交互式视频嵌入代码即可。 您可以在以下URL查看结果。 尽管该视频在页面上显示交互式视频，但尚未与现有的概览相集成：

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-1.html

将交互式视频与现有Quickview集成

此过程的最后一步是将交互式视频与网站上使用的现有Quickview实现相集成。 但是，没有任何一种集成解决方案是在所有情况下都适用的。每个Quickview实施都是独一无二的。 因此，需要一种最可能需要前端IT人员协助的具体方法。

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

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

这些调用并非独立的公共 API 调用（可以由网页逻辑从任意步骤进行调用）。相反，这些调用属于链式调用，即，每个后续步骤都隐藏在前一步的最后阶段（回调）。

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

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

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

此外，交互式视频查看器支持全屏操作模式。 最终用户通过单击缩略图而不离开全屏来触发Quickview。 要实现此功能，请更改前端代码，以便将Quickview模态对话框附加到查看器的容器。 请勿添加文档BODY或查看器处于全屏模式时不可用的其他网页元素。 执行此作业的代码需要侦听在查看器加载到页面上后发送的另一个查看器回调。

AEM返回的嵌入代码已经有一个现成的事件处理程序。 它被注释掉，如下面突出显示的代码片断所示：

<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处理函数。 使用它将查看器与Quickview激活逻辑集成。 当查看器加载到页面时，initComplete处理函数只触发一次。 此处理函数用于调整网页DOM中的Quickview对话框位置。

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

触发Quickview URL并激活Quickview面板的最后一步操作极有可能需要IT部门的前端IT人员的协助。 他们最了解如何通过拥有现成的Quickview URL，从正确的步骤准确触发Quickview实施。

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

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

使用categoryId和sku对象中的inData字段在quickViewActivate处理函数中重建此URL非常简单，这些字段通过查看器的代码传递给处理函数，如下所示：

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

演示网站使用简单的loadQuickView()函数调用触发Quickview对话框。 此函数只采用一个参数，即Quickview数据URL。 因此，集成交互式视频所需的最后一步是向quickViewActivate处理函数添加以下代码行：

loadQuickView(quickViewUrl);

最后，确保​Quickview​对话框已附加到查看器的容器元素。 默认嵌入代码提供实现此功能的示例步骤。 要获取对查看器的容器元素的引用，可使用以下几行代码：

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

其中inner_container是对查看器所管理的DIV元素的引用。 您希望对话框是该DIV的子项。

实际定位模态对话框元素并将其附加到上述容器的步骤具体情况。 同样，您可以向熟悉所需Quickview实施的前端开发人员寻求帮助。

对于示例网站，Quickview模态对话框将实现为DIV ，其中quickview模态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://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-3.html

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

请参阅使用快速视图创建自定义弹出窗口。