Show Menu
主题×

交互式视频

您可以轻松创建交互式视频(也称为购物视频),从而直接推动视频的转化。 客户在视频播放器一侧的面板中与视频进行交互,根据视频展示的内容,相关的服务、信息或产品缩略图会滚动到客户的视线中。客户可以点按缩略图并直接链接到相应的服务,也可以将项目添加到购物车以立即购买,或者链接到某个网页以了解更多信息。
视频结束时,所有提供项目的可视汇总会显示出来以发出行动动员。客户还有其他机会点按所需的项目。像这样的可操作特定体验能够提高客户的参与度和转化率。
另请参阅 交互式图像

交互式视频实际操作情况

要查看交互式购物视频的实际操作情况,请单击“实时演示 ”,滚动到页面上的“ Shoppable Media ​”标题,然后单击购物视频以开始播放。
  • 在播放过程中,当视频中使用产品时,相同的产品在右侧显示为缩略图。
  • 单击缩略图以暂停视频并打开产品的概览。 例如,单击视频中的KitchenAid缩览图图像可体验混合器的360度旋转视图,或放大以查看混合器详细信息。
如果您创建交互式视频以在用户单击缩略图时启动网页,某些设备将阻止弹出式网页打开。 在这种情况下,您必须更改设备上的弹出窗口阻止程序设置。 例如,在Apple iPhone 6上,点按“设置”>“ Safari”>“阻止弹出窗口 ”,然后将控件滑动到“关 闭” 。 现在,当您播放交互式视频并单击缩略图时,如果要打开弹出窗口,系统会提示您。 如果您接受,则会打开网页。

观看如何创建交互式视频

观看有关如何创建交互式视频的7分 钟30秒演练 outv.omniture.com?v=s4NHQ2dzqd7hIqWjeG2sIdyNWsTWyupA。 (尽管视频演练使用资产(按需)进行标记,但AEM资产中的交互式视频仍适用这些原则和步骤。)

Adobe 客户成功网络研讨会

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

快速入门:交互式视频

下面的工作流分步说明旨在帮助您在 Dynamic Media 中快速设置并运行交互式视频。
请查找某些“快速入门”任务中的​ 示例 ​标题。它包含一个简短的教程,该教程基 于尚未为其添
示例 ​有助于说明在您自己的网站上集成交互式视频的步骤。
当您完成上一个示例部分中的教程后,这 就是您具有完全集成的交互式视频的最终演示网页的样子
交互式视频步骤:
  1. (可选)识别概览变量 -首先,识别现有概览实施所使用的动态变量。 在创建交互式视频时,可以使用变量将产品缩略图映射到相应的产品概览。 请参 阅(可选)识别概览变量 只有在以下情况下,才需要执行此步骤 :·您希望通过触发概览来为视频添加交互性。 ·您的AEM实施不使 eCommerce integration framework从任何电子商务解决方案(如IBM Websphere Commerce、Elastic Path、hybris或Intershop)将产品数据提取到AEM。
  2. (可选)创建交互式视频查看器预设 -自定义组成播放器的各种组件的外观和行为,如视频浏览条和交互式缩略图。 Creating your own Interactive Video viewer preset is not required if you intend to use the out-of-the-box Interactive Video viewer presets Shoppable_Video_Light or Shoppable_Video_Dark instead. 请参 阅创建新查看器预设 (这是可选的)和创建 交互式查看器预设的特殊注意事项
  3. 上传视频及其关联的图像资产 -上传您要实现交互的视频和关联的图像。 请参阅 上传视频及其关联的缩略图资产
  4. 为视频添加交互性 -向视频添加一个或多个时间段。 然后,将这些时间段内的图像缩略图关联起来。 将每个图像缩略图分配给操作,如超链接、概览或体验片段。 (请注意,如果您的交互式内容包含相对URL的链接,特别是指向AEM站点页面的链接,则无法使用基于URL的链接方法。)最后,发布交互式视频资产。 Publishing creates the embed code or URL that you will eventually copy and apply to your website landing page.See Adding interactivity to your video . 请参阅 发布资产
  5. 在AEM中向网站或网站添加交互式视频。如果您使用AEM Sites或AEM eCommerce,或二者兼有,则可以通过将交互式媒体组件拖动到页面上,将交互式视频直接添加到AEM中的网页。 See Adding Dynamic Media Assets to Pages. 使用嵌入代码或URL将交互式视频与您的网站体验集成。 See Integrating an interactive video with your website . 如果您使用的是第三方WCM(Web内容管理器),则必须将新的交互式视频与您网站上使用的现有概览实施相集成。 请参 阅将交互式视频与现有概览相集成 将 Dynamic Media 资产添加到页面

(可选)识别概览变量

仅当满足以下条件时,才需要执行此任务:
  • 您希望通过触发Quickviews来为视频添加交互性。
  • 您对AEM的实施不使 eCommerce integration framework从任何电子商务解决方案(如IBM Websphere Commerce、Elastic Path、hybris或Intershop)将产品数据提取到AEM。
如果您的AEM实施使用电子商务,您可以跳过此任务并继续执行下一个任务。
首先,识别现有Quickview实施所使用的动态变量,这样您就可以在交互式视频创建过程中将产品缩略图映射到相应的产品Quickview。
在将时间区段添加到视频时,您需要为添加到区段的每个缩略图分配一个 SKU 及其他任何变量。稍后会使用这些变量显示正确的Quickview产品。
必须准确地识别唯一触发产品概览所需的变量,这一点很重要。
有时,可能需要向负责现有Quickview实施的IT专家咨询。 他们可能知道在系统中识别概览所需的最少数据集。 但在大多数情况下,可能只需简单地分析前端代码的现有行为即可。
大多数Quickview实施都使用以下模式:
  • 用户在网站上激活一个用户界面元素。例如,单击“概览”按钮。
  • 如果需要,网站会向后端发送Ajax请求以加载概览数据或内容。
  • Quickview数据将转换为准备在网页上呈现的内容。
  • 最后,前端代码以可视形式将这些内容呈现在屏幕上。
因此,方法是访问现有网站中实施Quickview的不同区域,触发Quickview,并捕获网页发送的用于加载Quickview数据或内容的Ajax URL。
通常情况下,您不需要使用任何专业的调试工具。现代的 Web 浏览器具备 Web 检查器,可以实现相同的功能。下面列举了一些具备 Web 检查器的 Web 浏览器:
  • To see all outgoing HTTP requests in Google Chrome, press F12 (Windows) or Command+Options+I (Mac) to open the Developer Tools panel, and then click the Network tab.
  • In Firefox, you can either activate the Firebug plug-in by pressing F12 (Windows) or Command+Option+I (Mac) and use its Net] tab, or you can use the built-in Inspector tool and its Network tab.
  • 在Internet explorer中,按 F12激活调试器工具
在浏览器中打开网络监视时,在页面上触发概览。
现在,在网络日志中查找Quickview Ajax URL,并复制录制的URL供将来分析。 在大多数情况下,触发概览时,会向服务器发出大量请求。 通常,Quickview Ajax URL是列表中第一个URL。 It has either a complex query string portion or path, and its response MIME type is either text/html , text/xml , or text/javascript .
在此过程中,访问网站中具有不同产品类别和类型的不同区域非常重要。 原因是Quickview URL可能具有特定网站类别的通用部分,但仅在您访问网站的其他区域时更改。
在最简单的情况下,Quickview URL中唯一的变量部分是产品SKU。 在这种情况下,产品SKU值是在AEM中向交互式视频中的时间区段添加缩略图时唯一需要的数据。
但是,在复杂情况下,Quickview URL除了产品SKU之外还具有不同的可变元素,如类别ID、颜色代码等。 在这种情况下,每个此类元素都会成为AEM中缩略图数据定义中的一个单独变量。
请考虑以下Quickview URL示例及其生成的缩略图变量:
单个 SKU,位于查询字符串中。
录制的Quickview URL包括:
  • https://server/json?productId=866558&source=100
  • https://server/json?productId=1196184&source=100
  • https://server/json?productId=1081492&source=100
  • https://server/json?productId=1898294&source=100
The only variable part in the URL is the value of the productId= query string parameter, and it is clearly a SKU value. Therefore, our thumbnails only need SKU fields populated with values like 866558 , 1196184 , 1081492 , 1898294 .
单个 SKU,位于 URL 路径中。
录制的Quickview URL包括:
  • https://server/product/6422350843
  • https://server/product/1607745002
  • https://server/product/0086724882
The variable part is in the last portion of the path, and it becomes the SKU value of AEM thumbnails: 6422350843 , 1607745002 , 0086724882 .
SKU 和类别 ID,位于查询字符串中。
录制的Quickview URL包括:
  • https://server/quickView/product/?category=1100004&prodId=305466
  • https://server/quickView/product/?category=1100004&prodId=310181
  • https://server/quickView/product/?category=1740148&prodId=308706
在这种情况下,URL 中有两个可变部分。The SKU is stored in the prodId parameter and the category ID is stored in the category= parameter.
因此,缩略图定义是成对存在的。 即,一个 SKU 值对应一个额外的变量 categoryId 。生成的各对如下所示:
  • SKU is 305466 and categoryId is 1100004
  • SKU is 310181 and categoryId is 1100004
  • SKU is 308706 and categoryId is 1740148
示例
将上述方法应用于我们的示例网站时,我们有一个网页,其中包含许多产品缩略图,每个缩略图都有一个“查看更多”按钮:
在激活页面上所有可用的产品概览后,您将获得向后端发出的概览请求的以下列表:
  • 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
在创作环境中单击缩略图时,将显示“概览”对话框的预览。
您可以选择创建您自己的自定义交互式视频查看器预设。 您可以确定视频播放器的样式、交互式缩略图以及显示在视频末尾的缩略图网格视图等。
交互式视频查看器预设能够准确地呈现您添加的视频和所有时间轴区段。当您在“预览”模式中单击产品缩略图时,它还会使用默认概览示例,这样您就可以在发布前测试其交互性。
在保存查看器预设后,查看器预设的状态会在“查看器预设”页面中自动设置为​ 开启 。此状态意味着无论您何时预览视频,都可以在Dynamic media组件中看到该视频。 请确保还手动发布新查看器预设。
请参 阅创建新查看器预设 ,以创建您自己的交互式视频查看器预设。

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

If you have already uploaded your video and thumbnail assets, proceed to Adding interactivity to your video .
如果您上传了错误的视频或图像,或者要删除已上传的视频或您不再需要的图像,请参阅删 除资产
要上传视频及其关联的缩略图资产,请执行以下操作:
  1. 将视频和关联的缩略图资产上传到一个或多个所需的文件夹。
    现在,可以为视频添加交互性。

为视频添加交互性

您可以使用“创建交互式视频”页面上的就地可视编辑器,向视频添加时间轴区段。
在添加时间轴区段后,您可以在每个区段内添加缩略图。对于添加的每个缩略图,您可以分别应用一个操作。例如,您可以将概览应用于缩略图,也可以为其分配超链接或体验片段。
请参阅 体验片段
请注意,在体验片段中嵌入查看器时,不支持交互式视频中的社交媒体共享工具。要解决此问题,您可以使用或创建没有社交媒体共享工具的查看器预设。 此类查看器预设可让您成功地将其嵌入到体验片段中。
如果您的交互式内容包含与相对URL(特别是指向AEM站点页面的链接)的链接,则无法使用基于URL的链接方法。
在当前创建/编辑会话中,页面右上角附近支持撤消和重做选项。
保存交互式视频后,视频会立即打开到“预览”中。从中,您可以选择交互式视频查看器预设并播放视频,以大致了解该查看器预设将如何呈现给客户。
要为视频添加交互性,请执行以下操作:
  1. 在“资产”视图中,导航到您上传的要实现交互的视频。
  2. 执行下列操作之一:
    • 将鼠标悬停在图像上,然后点按 选择 (复选标记图标)。 在工具栏中,点按​ 编辑
    • 将鼠标悬停在图像上,然后点 按更多操作 (三个圆点图标) >编辑
    • 点按图像以在“详细信息视图”页面中将其打开。 在工具栏中,点按​ 编辑
  3. 在“创建交互式视频”页面中,执行以下任一操作:
    • 点按​ 播放 ​按钮以开始播放视频。当视频中出现您要突出显示的特定产品、服务或详细信息时,点按工具栏中的​ 添加区段 。重复上述步骤,直到视频结束。
      对于您添加的每个时间区段,您都可以为其分配一个或多个缩略图,然后将这些缩略图链接到Quickview产品页面供客户购买,或链接到网页以了解更多信息。
    • 点按​ 播放 ​按钮以开始播放视频。当视频中出现您要突出显示的特定产品、服务或详细信息时,点按​ 暂停 。点按​ 添加区段
      继续播放视频,并在您要添加区段的时间轴点处暂停视频,直到视频结束。
  4. (可选)向左拖动时间轴缩放滑块上的栏可放大或向右缩小 ​,从而控制您看到的已添加区段的详细信息。
    根据视频的长度,“区段持续时间”默认为以下值:
    如果视频长度为…… “区段持续时间”设置默认为……
    3分钟或更久 60秒
    2-3分钟 30秒
    1-2 分钟 20 seconds
    30-60秒 10秒
    30秒或更短 5秒
    视频时间轴使用的屏幕空间与其可用的空间相同。 因此,在调整浏览器大小时,您添加的区段将保持其正确的宽度。
    为说明这一点,以下三个屏幕截图使用同一视频。 请注意,每个区段的宽度会根据时间轴比例设置而发生变化。
    屏幕截图A
    上面的屏幕截图A显示了29秒产品视频的默认视图。 时间轴比例设置为默认的5秒。
    屏幕截图B
    在上面的屏幕截图B中,时间线缩放滑块从默认的5秒拖动到3秒。 请注意,单个时间轴比例时间戳现在都以3秒的间隔设置。
    屏幕截图C
    在上面的屏幕截图C中,“时间轴缩放”设置被移至8秒。 请注意,包含产品缩略图的区段是如何缩小的。 如果您有较长的视频并且希望能够看到通常适合页面宽度的更多区段的概述,则以这种方式进行缩小很有用。
  5. (可选)执行以下操作之一:
    • 调整区段的开始时间和结束时间。
      选择一个段,然后拖动前导或尾部蓝色椭圆以分别调整开始或结束时间。 显示的视频帧会根据您的调整,移动到视频中的相应时间。时间轴区段的移动会受到时间轴中任意相邻区段的限制。最少允许区段有一秒钟的时长。
      可使用以下导航快捷方式快速地查看和微调视频区段:
      • 点按前导蓝色椭圆,将视频直接搜索到该段的开头。
      • 点按尾部的蓝色椭圆,将视频直接搜索到该段的末尾。
      • 点按整个区段,使视频播放返回到该区段的开头。
    调整时间轴区段结尾的位置
    • 删除区段
      Select the last segment that is on the timeline, then on the toolbar, tap Delete Segment . 如果选择了两个或两个以上的区段,则会禁用“删除区段”功能。
      您只能删除最后一个区段。For example, if you wanted to delete all the segments on the timeline, you must always select the last one, then tap Delete Segment .
  6. 选择要将一个或多个缩略图关联到的时间段。
  7. 在视频右侧,点按​ 内容 ​选项卡。
  8. 在内容选项卡下,点按 选择资产 ,然后浏览并选择您要用于视频的所有图像资产。 选定的资产将添加到“内容”选项卡的“资产选择器”面板。
  9. 在“内容”选项卡下的资产选择器中,执行下列任一操作:
    将缩略图关联到选定的时间轴区段
    点按右侧资产选择器面板中的图像。
    您可以向时间轴区段中添加任意所需数量的缩略图。对于您选择的每个图像,资产选择器中相应图像的上方便会出现一个对勾标记。
    将缩略图从选定的时间轴区段中删除
    执行以下操作之一:
    • 在资产选择器面板中,点按带有复选标记的图像以取消选择它。 图像资产将从时间轴区段中删除。
    • 在选定的时间轴区段中,点按一幅图像,然后点按工具栏中的 删除产品
    在资产选择器面板中点击图像会将其添加到选定的时间轴区段。
  10. 在某个时间轴区段内选择一个缩略图,然后点按​ 操作 ​选项卡。
  11. 执行以下操作之一:
    将所选缩略图与概览相关联
    在“操作类型”下,点按 概览
    如果您是AEM Sites和Ecommerce的客户:
    • 请注意,“SKU 值”文本字段会预先填充选定产品的 SKU(库存单位),即您提供的每个不同产品或服务的唯一标识符。当图像与AEM Commerce中的产品关联时,将自动填充该字段。
    • 如果预填充的SKU不正确,请点按或单击产品选取器图标(放大镜)以打开选择产品页面。 点按或单击要使用的产品,然后点按页面右上角的复选标记以返回到交互式视频编辑器。
    如果您不是 AEM Sites或Ecommerce客户
    • 请参阅 识别热点变量 。您需要定义这些变量。
    • 默认情况下,此SKU字段使用图像资产的文件名,但不带扩展名。 如果您的基于 SKU 的文件遵循标准的命名规范,则通常不需要进行任何额外的编辑。
    • 否则,请编辑默认值并输入正确的SKU值。 在“SKU值”文本字段中,键入产品的SKU(库存单位),即您提供的每个不同产品或服务的唯一标识符。 输入的SKU值会自动填充概览模板的变量部分,以便系统能够将点击的图像与特定SKU的概览相关联。
    (Optional) If there are other variables within the Quickview that you need to use to further identify a product, tap Add Generic Variable . 在文本字段中,指定其他变量。 例如, category=Womens 就是一个添加的变量。
    将选定的缩略图与超链接相关联
    在“操作类型”下,点 按超链接 ,然后执行下列操作之一:
    • 如果您是AEM Sites客户,请点按站点选择器图标(文件夹)以导航到网页。 请注意,如果您的交互式内容具有相对URL的链接,特别是指向AEM站点页面的链接,则无法使用基于URL的链接方法。
    • 如果您是独立的Dynamic media客户,请在HREF文本字段中指定链接网页的完整URL路径。
    请确保指定是在新的浏览器选项卡还是在当前的选项卡中打开链接。
    将选定的缩略图图像与体验片段相关联
    在操作类型下,点按 体验片段 ,然后执行以下操作:
    • 如果您是AEM Sites客户,请点按或单击搜索图标(放大镜)以打开体验片段页面。 点按或单击要使用的体验片段,然后点 按页面右上角的选择以返回到上一页上的操作面板。 请参阅 体验片段
    • 指定体验片段在视频中的显示方式的宽度和高度。
    注意 :请注意,在体验片段中嵌入查看器时,不支持交互式视频中的社交媒体共享工具。 要解决此问题,您可以使用或创建没有社交媒体共享工具的查看器预设。 此类查看器预设可让您成功地将其嵌入到体验片段中。
    编辑已分配给缩略图的操作 在某个时间轴区段内,点按其文本标签右侧带有链式链接的缩略图。该链式链接表示已向该缩略图分配操作。点按 操作 选项卡以进行更改。
    更改缩略图的文本标签
    默认情况下,文本标签使用缩略图的元数据 Title 字段。 If Title is not present, the thumbnail image's filename is used instead, but without the extension.
    To change the text label of a thumbnail image, under the Actions tab, directly below the image asset that is displayed, enter the desired text. 请参阅下面的插图。
    请注意,新文本标签仅供视频播放器本身以及时间轴区段中显示的缩略图文本使用。标签更改不会影响缩略图的标题元数据字段及其文件名。
    还原所做的更改 在页面的右上角附近,点按 撤消 重做
    新文本标签会添加到缩略图。
  12. 执行下列操作之一:
    • 重复第6-11步,将更多缩略图添加到视频中的时间轴区段。
    • 继续执行可选步骤13。
  13. (可选)执行下列操作之一:
    • 合并区段 -您可以将两个相邻的区段(无论是否分配了产品缩略图)合并到一个区段中。
      在时间轴上,点按要合并到一个区段中的两个或多个连续区段。 请注意,下图中的两个选定段上没有蓝色的椭圆拖动手柄。
      点按 工具栏上的 “合并区段”。
    将两个选定的五个第二段合并为一个十个第二段。
    • 拆分区段 -您可以将一个区段分为两个等时段的区段。 如果已为区段分配了产品缩略图,则缩略图会合并到左侧区段中。
      在时间轴上,点按要分成两半的区段,然后点按工具栏 上的拆分区段
      选择两个或多个段将禁用“拆 分段 ”功能。
    将选定的10秒段分为两个段,每段5秒。
  14. 在“创建交互式视频”页 面的右上角附近 ,将显示与视频一起使用的当前选定查看器预设的名称。 点按名称以选择其他查看器预设。
    例如, Shoppable_Video_light 查看器预设能够让您在播放视频时,在视频旁边留出一个白色显示区域。该显示区域用于在播放视频时,显示可点击的缩略图。 Shoppable_Video_dark 查看器预设则能够让您在播放视频时,在视频旁边留出一个黑色显示区域。
    如果您创建了自己的交互式视频查看器预设,您还会在预设列表中看到该预设,您可以从中进行选择。
    完成后,点按保
    在保存交互式视频时,会自动保存 .vtt 一个关联的文件。 The .vtt file is saved to the _VTT folder located at the root of Assets . 必须具备该文件和文件夹,您的交互式视频才能在您的网站上正常播放。As such, do not move, edit, or delete the _VTT folder or its contents.
  15. 发布交互式视频。发布后会创建嵌入代码或 URL,最后您需要将该嵌入代码或 URL 复制并粘贴到您的网站体验。
    如果您使用Quickviews添加了交互性,则只使用嵌入代码;如果您通过超链接的网页添加了交互性,则还可以使用已发布的URL。 但是,请注意,如果您的交互式内容包含相对URL的链接,特别是指向AEM站点页面的链接,则无法使用基于URL的链接方法。
    请参阅 发布资产
    要发布带有Quickviews的购物视频,请确保您还从您的商务区域单独发布每个视频的相关图像资产。
    在添加时间轴区段并发布交互式视频后,您便可以将其添加到您的现有网站登录页面。See Integrating an interactive video with your website.

发布交互式视频资源

See Publishing Assets for details on how to publish interactive video assets.

Integrating an interactive video with your website

现在,在上传视频、向视频添加时间轴区段并发布交互式视频后,您便可以将其添加到您的现有网站。
如果您是AEM Sites客户,则可以通过将交互式媒体组件拖动到页面来添加交互式视频。 See Adding Dynamic Media Assets to Pages.
如果您是独立的AEM资产客户,则可以按本节所述手动将交互式视频添加到您的网站。
  1. 复制已发布的交互式视频的嵌入代码或 URL。
如果您使用Quickviews添加了交互性,则只使用嵌入代码;如果您通过超链接的网页添加了交互性,则还可以使用已发布的URL。 但是,请注意,如果您的交互式内容包含相对URL的链接,特别是指向AEM站点页面的链接,则无法使用基于URL的链接方法。
  1. 在目标网页代码中,找到静态视频所在的位置。
  2. 删除静态视频,并将其代码原封不动地替换为您从 AEM 资产中复制的嵌入代码或 URL。
由于复制的嵌入代码是为响应式环境设计的,因此该代码应该会自动地适应之前由静态视频所占用的区域。
至此,如果您只是通过超链接的网页添加交互性,您就已经完成了所有操作。 但是,如果您添加任何交互性来触发概览,则交互式视频旁边的缩略图仅用于显示目的;它们尚未与您现有的Quickviews集成。 在这种情况下,您现在需要将交互式视频与网站上的现有Quickviews集成。
示例
以演示网站为例:
请注意,它是标准视频嵌入代码:
<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上看到结果。 虽然该视频在页面上显示交互式视频,但尚未与现有概览相集成:

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

此任务仅在您是独立AEM资产客户时适用。
此过程的最后一步是将交互式视频与网站上使用的现有Quickview实现相集成。 但是,没有任何一种集成解决方案是在所有情况下都适用的。每个Quickview实施都是独一无二的。 因此,需要一种最可能需要前端IT人员协助的特定方法。
现有Quickview实现通常表示在网页上按以下顺序发生的一系列相互关联的操作:
  1. 用户在网站的用户界面上触发一个元素。
  2. 前端代码根据在步骤1中触发的用户界面元素获取概览URL。
  3. 前端代码使用在步骤2中获取的URL发送AJAX请求。
  4. 后端逻辑将相应的概览数据或内容返回到前端代码。
  5. 前端代码加载概览数据或内容。
  6. 或者,前端代码将加载的Quickview数据转换为HTML表示形式。
  7. 前端代码显示一个模态对话框或面板,并将 HTML 内容呈现在屏幕上以供最终用户查看。
这些调用并非独立的公共 API 调用(可以由网页逻辑从任意步骤进行调用)。相反,这些调用属于链式调用,即,每个后续步骤都隐藏在前一步的最后阶段(回调)。
当交互式视频将替换步骤1和部分步骤2的同时,当用户单击交互式视频内的缩略图时,查看器将处理此类用户交互。 查看器将向网页返回一个事件,该事件包含之前添加到AEM的所有缩略图数据。
在这样的事件处理函数中,前端代码执行以下操作:
  • 监听交互式视频发出的事件。
  • 根据缩略图数据构造概览URL。
  • 触发从后端加载概览并在屏幕上显示概览的过程。
此外,交互式视频查看器还支持全屏操作模式。 最终用户通过单击缩略图而不离开全屏来触发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中的“概览”对话框位置。
构建概览URL的过程与识别本主题前面介绍的缩略图变量的过程相反。 使用我们之前确定的Quickview URL示例,您可以了解在每种情况下如何构建Quickview URL:
单个 SKU,位于查询字符串中
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
单个 SKU,位于 URL 路径中 s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });
SKU 和类别 ID,位于查询字符串中
s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });
触发Quickview URL并激活Quickview面板的最后一步极有可能需要IT部门的前端IT人员的协助。 他们最了解如何从正确的步骤准确触发Quickview实施,并拥有现成的Quickview URL。
您可以了解如何将这些步骤应用到演示网站,以将交互式视频与概览代码完全集成。 在本主题的前面,Quickview URL的结构如下所示:
/datafeed/$CategoryId$-$SKU$.json

使用对象中的可用字段(通过查 quickViewActivate 看器的代码传递 categoryId``sku``inData 到该处理器中),可以轻松地在处理程序中重建此URL,如下所示:
var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

The demo website is triggering the Quickview dialog box using a simple loadQuickView() function call. 此函数只使用一个参数,即Quickview数据URL。 So the last step needed to integrate the interactive video is to add the following line of code to the quickViewActivate handler:
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 加到文档的概览模态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>

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

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