您可以轻松创建交互式视频(也称为购物视频),从而直接推动视频转化。 客户在视频播放器一侧的面板中与视频进行交互,根据视频展示的内容,相关的服务、信息或产品缩略图会滚动到客户的视线中。客户可以点按缩略图并直接链接到相应的服务,也可以将项目添加到购物车以立即购买,或者链接到某个网页以了解更多信息。
视频结束时,所有提供项目的可视汇总会显示出来以发出行动动员。客户还有其他机会点按所需的项目。像这样的可操作特定体验能够提高客户参与度和转化率。
另请参阅交互式图像。
要查看交互式购物视频的实际操作情况,请单击实时演示,滚动到页面上的购物视频标题,然后单击购物视频开始播放。
在播放过程中,当视频中使用产品时,相同的产品以缩略图图像的形式显示在右侧。
要暂停视频并打开产品的“快速视图”,请点按缩略图。 例如,点按视频中的KitchenAid缩览图图像,体验混合器的360度旋转视图,或放大以查看混合器详细信息。
如果您创建交互式视频以在用户点击缩略图图像时启动网页,则某些设备会阻止弹出式网页打开。 在这种情况下,请更改设备上的弹出窗口阻止程序设置。 例如,在Apple iPhone 6上,点按设置> Safari >阻止弹出窗口,然后将控件滑动到关闭。 现在,当您播放交互式视频并单击缩略图时,系统会提示您是否要打开弹出窗口。 如果您接受,将打开网页。
观看有关如何创建交互式视频的 7 分 30 秒视频演练。
(尽管视频演练使用“资产(按需)”进行标记,但Adobe Experience Manager资产中的交互式视频仍适用这些原则和步骤。)
在Experience Manager资产中使用交互式视频、链接共享和YouTube共享网络研讨会教您如何使用交互式视频和其他功能将转化驱动的事件绑定到视频营销内容中。
下面的工作流分步说明旨在帮助您在 Dynamic Media 中快速设置并运行交互式视频。
请查找某些“快速入门”任务中的示例标题。它包含一个简短的教程,该教程基于此启动演示网页,其中尚未为其添加交互性。
示例有助于说明在您的网站上集成交互式视频的步骤。
完成上一个示例部分中的教程后,将以](https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-3.html)方式显示具有完全集成交互式视频的最终演示网页。[
交互式视频步骤:
(可选)识别快速视图变量 — 通过识别现有快速开始实施所使用的动态变量来识别视图。在创建交互式视频时,您可以使用变量将产品缩略图映射到相应的产品快速视图。 请参阅(可选)识别快速视图变量。
仅当以下所有条件均为true时,才需要执行此步骤:·您希望通过触发快速视图来为视频添加交互性。· Your implementation of Experience Manager does not use an eCommerce integration framework for dulle product data into Experience Manager from any eCommerce solution(如IBM WebSphere® Commerce、Elastic Path、hybris或Intershop)。
(可选)创建交互式视频查看器预设 — 自定义组成播放器的各种组件的外观和行为,如视频浏览条和交互式缩略图。如果您打算使用现成的交互式视频查看器预设Shoppable_Video_Light
或Shoppable_Video_Dark
,则无需创建您自己的交互式视频查看器预设。
请参阅创建新查看器预设(可选)和创建交互式查看器预设的特殊注意事项。
上传视频及其关联的图像资产 — 上传您要实现交互的视频和关联的图像。请参阅上传视频及其关联的缩略图资产。
为视频添加交互性 — 向视频添加一个或多个时间段。然后,将这些时间段中的图像缩略图关联起来。 将每个图像缩略图分配给操作,如超链接、快速视图或体验片段。
(如果您的交互式内容包含与相对URL的链接,特别是指向“Experience Manager站点”页面的链接,则无法使用基于URL的链接方法。)
最后,发布交互式视频资产。 发布后会创建嵌入代码或URL,您最终会将其复制并应用到您的网站登陆页。 请参阅为视频添加交互性。
请参阅发布资产。
在Experience Manager中将交互式视频添加到您的网站或您的网站 — 如果您使用Experience Manager站点或Experience Manager电子商务,或两者兼有,则可以在Experience Manager中将交互式视频直接添加到网页。将交互式媒体组件拖动到页面上。 请参阅将Dynamic Media资产添加到页面。
使用嵌入代码或URL将交互式视频集成到您的网站体验。 请参阅将交互式视频与您的网站集成。
如果您使用第三方WCM(Web内容管理器),则必须将新的交互式视频与您网站上使用的现有快速视图实施相集成。 请参阅将交互式视频与现有快速视图集成。
将 Dynamic Media 资产添加到页面
只有在以下情况下才需要此任务:
如果您的Experience Manager实施使用电子商务,则可以跳过此任务并继续到下一个任务。
开始,识别现有“快速视图”实施所使用的动态变量,以便您在交互式视频创建过程中将产品缩略图映射到相应的产品“快速视图”。
在向视频中添加时间区段时,您需要为添加到区段的每个缩略图分配一个SKU(库存单位)和任何其他变量。 以后会使用这些变量来显示正确的快速视图产品。
正确识别唯一触发产品快速视图所需的变量非常重要。
有时,只需咨询负责现有快速视图实施的IT专家即可。 他们可能知道系统中标识快速视图的最小数据集。 但是,可以简单地分析前端代码的现有行为。
大多数快速视图实施采用以下模式:
因此,方法是访问现有网站中实施快速视图的不同区域。 然后触发快速视图,并捕获网页发送的用于加载快速视图数据或内容的Ajax URL。
通常情况下,您不需要使用任何专业的调试工具。现代的 Web 浏览器具备 Web 检查器,可以实现相同的功能。下面列举了一些具备 Web 检查器的 Web 浏览器:
要在Google Chrome中查看所有传出HTTP请求,请按F12(Windows)或Command+Options+I(Mac)打开“开发人员工具”面板,然后单击Network选项卡。
在Firefox中,您可以通过按F12(Windows)或Command+Option+I(Mac)并使用其Net选项卡来激活Firebug插件,也可以使用内置检查器工具及其“网络”选项卡。
在Internet Explorer中,通过按F12激活调试器工具。
在浏览器中打开网络监视时,在页面上触发“快速视图”。
现在,在网络日志中找到“快速视图Ajax URL”,并复制记录的URL以供将来分析。 通常,当您触发“快速视图”时,会有许多请求被发送到服务器。 通常,快速视图Ajax URL是列表中最早的URL之一。 它具有复杂的查询字符串部分或路径,其响应MIME类型为text/html
、text/xml
或text/javascript
。
在此过程中,请务必访问网站中具有不同产品类别和类型的不同区域。 其原因是,快速视图URL的某些部分对于给定的网站类别是通用的,但仅在您访问网站的其他区域时才会更改。
在最简单的情况下,快速视图URL中唯一的变量部分是产品SKU。 在这种情况下,产品SKU值是向交互式视频中的某个时间区段添加缩略图时所需的唯一数据。
但是,在复杂情况下,快速视图URL除了产品SKU之外,还具有不同的可变元素,如类别ID和颜色代码。 在这种情况下,在Experience Manager中,每个此类元素都会成为缩略图数据定义中的单独变量。
请考虑以下快速视图URL及其生成的缩略图变量示例:
单个 SKU,位于查询字符串中。 |
录制的快速视图URL包括:
URL中唯一的变量部分是 |
单个 SKU,位于 URL 路径中。 |
录制的快速视图URL包括:
变量部分位于路径的最后一部分,它成为Experience Manager缩略图的SKU值: |
SKU 和类别 ID,位于查询字符串中。 |
录制的快速视图URL包括:
在这种情况下,URL 中有两个可变部分。SKU存储在 因此,缩略图定义是成对存在的。 即,一个SKU值和一个额外的变量
|
示例
将上述方法应用于示例网站时,您的网页包含多个产品缩略图,每个缩略图都包含“查看更多”按钮:
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html
在激活页面上所有可用的产品快速视图后,您将获得向后端发出的以下快速视图请求列表:
查看服务器调用时,产品特定信息仅在请求路径中显示。 您还会注意到,查询字符串根本未使用,并且涉及两种不同类型的数据段:
根据此信息,整个快速视图URL具有以下模式:
/datafeed/$categoryId$-$SKU$.json
基于此分析,您得出的结论是,您可以对缩略图使用以下两个变量:categoryId
和SKU
。
现在,您便可以上传视频及其关联的缩略图资产了。
如果您打算使用默认的现成交互式视频查看器预设类型Shoppable_Video_dark
或Shoppable_Video_light
,则可以跳过此任务并继续下一步。
在创作环境中点击缩览图后,将显示“快速视图”对话框的预览。
您可以选择创建自己的自定义交互式视频查看器预设。 您可以确定视频播放器的样式、交互式缩略图以及显示在视频末尾的缩略图网格视图等。
交互式视频查看器预设能够正确呈现您添加的视频和所有时间轴区段。当您在预览模式下单击产品缩略图时,它还会使用默认的“快速视图”示例,这样您就可以在发布前测试其交互性。
保存查看器预设后,“查看器预设”页面中的查看器预设状态将自动设置为 开。此状态表明查看器预设在 Dynamic Media 组件中可见,预览视频时也可见。另请确保手动发布新查看器预设。
请参阅创建新查看器预设以创建您自己的交互式视频查看器预设。
如果您已经上传了视频和缩略图资产,请继续执行向视频添加交互性。
如果您上传了错误的视频或图像,或者想要删除不再需要的已上传视频或图像,请参阅删除资产。
要上传视频及其关联的缩略图资产,请执行以下操作:
将视频和关联的缩略图资产上传到一个或多个所需的文件夹。
请参阅上传资产。
请参阅使用 FTP 作业计划功能上传资产。
现在,可以为视频添加交互性。
您可以使用“创建交互式视频”页面上的就地可视编辑器,向视频添加时间轴区段。
在添加时间轴区段后,您可以在每个区段内添加缩略图。对于添加的每个缩略图,您可以分别应用一个操作。例如,您可以将快速视图应用到缩略图,或者为其分配超链接或体验片段。
请参阅体验片段。
将查看器嵌入体验片段时,不支持交互式视频中的社交媒体共享工具。 您可以使用或创建没有社交媒体共享工具的查看器预设。 此类查看器预设使您能够成功地将其嵌入到体验片段中。
如果您的交互式内容包含与相对URL(尤其是指向Experience Manager站点页面的链接)的链接,则无法使用基于URL的链接方法。
在当前创建/编辑会话中,页面右上角附近支持撤消和重做选项。
在保存交互式视频后,视频会立即在“预览”中打开。从中,您可以选择交互式视频查看器预设并播放视频,大致了解交互式视频如何呈现给客户。
要向视频添加交互性:
在“资产”视图中,导航到您上传的要实现交互的视频。
执行下列操作之一:
将鼠标悬停在图像上,然后点按选择(复选标记图标)。 在工具栏中,点按编辑。
将鼠标悬停在图像上,然后点按更多操作(三个点图标)>编辑。
要在“详细信息”视图页中打开它,请点按图像。 在工具栏中,点按编辑。
在“创建交互式视频”页面中,执行以下任一操作:
要开始播放视频,请点按播放按钮。 当视频中出现您要突出显示的特定产品、服务或详细信息时,点按工具栏中的添加区段。重复上述步骤,直到视频结束。
对于您添加的每个时间区段,您都可以为其分配一个或多个缩略图。 然后,您可以将这些缩略图链接到“快速视图”产品页面,供客户购买,或链接到网页以了解更多信息。
要开始播放视频,请点按播放按钮。 当视频中出现您要突出显示的特定产品、服务或详细信息时,点按暂停。点按添加区段。
继续播放视频,并在您要添加区段的时间轴点处暂停视频,直到视频结束。
(可选)向左拖动时间轴缩放滑块上的栏可放大或向右缩小。 通过此操作,您可以控制您看到的已添加区段的详细信息。
根据视频的长度,区段持续时间默认为以下值:
如果视频长度为…… | 区段持续时间设置默认为…… |
3分钟或更多 | 60秒 |
2-3分钟 | 30秒 |
1-2 分钟 | 20秒 |
30-60秒 | 10秒 |
30秒或更短 | 5秒 |
视频时间轴使用的屏幕空间与它可用的屏幕空间一样多。 因此,在调整浏览器大小时,您添加的区段会保持其正确的宽度。
为说明这一点,以下三个屏幕截图使用同一视频。 请注意,每个区段的宽度会根据时间轴缩放设置而改变。
屏幕截图A
屏幕截图上面显示了29秒产品视频的默认视图。 时间轴缩放设置为默认的5秒。
屏幕截图B
在上面的屏幕截图B中,将时间轴缩放滑块从默认的5秒到3秒拖动。 请注意,现在各个时间轴缩放时间戳都以3秒的间隔设置。
屏幕截图C
在上面的截屏C中,时间轴缩放设置已移动到8秒。 注意包含产品缩略图的细分已收缩。 如果您的视频较长,并且希望能够看到通常适合页面宽度的更多区段的概述,以这种方式缩小很有用。
(可选)执行以下操作之一:
调整区段的开始时间和结束时间。
选择一个段,然后拖动前导或尾部蓝色椭圆以分别调整开始或结束时间。 显示的视频帧会根据您的调整,移动到视频中的相应时间。时间轴区段的移动会受到时间轴中任意相邻区段的限制。最少允许区段有一秒钟的时长。
可使用以下导航快捷方式快速地查看和微调视频区段:
调整时间轴区段结尾的位置
删除区段
选择时间轴上的最后一个区段,然后点按工具栏中的删除区段。 如果选择了两个或多个区段,则会禁用“删除区段”功能。
您只能删除最后一个区段。例如,如果要删除时间轴上的所有区段,则必须始终选择最后一个区段,然后点按删除区段。
选择您要为其关联一个或多个缩略图的时间区段。
在视频右侧,点按内容选项卡。
在“内容”选项卡下,点按选择资产,然后浏览并选择您要用于视频的所有图像资产。 选定的资产将添加到“内容”选项卡的“资产选择器”面板。
在“内容”选项卡下的资产选择器中,执行下列任一操作:
将缩略图关联到选定的时间轴区段 | 点按右侧“资产选择器”面板中的图像。 您可以向时间轴区段中添加任意所需数量的缩略图。对于您选择的每个图像,资产选择器中相应图像的上方便会出现一个对勾标记。 |
将缩略图从选定的时间轴区段中删除 | 执行以下操作之一:
|
点击“资产选择器”面板中的图像会将其添加到选定的时间轴区段。
在某个时间轴区段内选择一个缩略图,然后点按操作选项卡。
执行以下操作之一:
将所选缩略图与快速视图关联 | 在“操作类型”下,点按快速视图。 如果您是Experience Manager站点和电子商务客户:
如果您是不是Experience Manager站点或电子商务客户
(可选)如果您必须在“快速”视图中使用其他变量来进一步标识产品,请点按添加常规变量。 在文本字段中,指定一个额外的变量。 例如,
|
将选定的缩略图与超链接相关联 | 在“操作类型”下,点按超链接,然后执行以下操作之一:
请确保指定是在新的浏览器选项卡还是在当前的选项卡中打开链接。 |
将所选缩略图与体验片段关联 | 在操作类型下,点按体验片段,然后执行以下操作:
|
编辑已分配给缩略图的操作 | 在某个时间轴区段内,点按其文本标签右侧带有链式链接的缩略图。该链式链接表示已向该缩略图分配操作。要进行更改,请点按操作选项卡。 |
更改缩略图的文本标签 | 默认情况下,文本标签使用缩略图的 要更改缩略图的文本标签,请在操作选项卡中,直接在显示的图像资产下方输入所需的文本。 请参阅下面的插图。 新文本标签仅由视频播放器本身以及时间轴区段中显示的缩略图文本使用。 标签更改不会影响缩略图的“标题”元数据字段及其文件名。 |
还原所做的更改 | 在页面的右上角附近,点按撤消或重做。 |
新文本标签会添加到缩略图。
执行下列操作之一:
(可选)执行下列操作之一:
合并区段 — 您可以将两个相邻的区段(无论是否分配了产品缩略图)合并到一个区段中。
在时间轴上,点按要合并到一个中的两个或多个连续段。 下图中的两个选定段上没有蓝色的椭圆拖动手柄。
点按工具栏上的合并区段。
将两个选定的五秒段合并为一个十秒段。
拆分区段 — 您可以将单个区段分为两个等时段区段。如果已为区段分配了产品缩略图,则缩略图会合并到左侧区段中。
在时间轴上,点按要分成两半的区段,然后点按工具栏上的拆分区段。
选择两个或多个段将禁用拆分段功能。
将选定的10秒段拆分为两段,每段5秒。
在创建交互式视频页面的右上角附近,将显示与视频一起使用的当前选定查看器预设的名称。 要选择其他查看器预设,请点按名称。
例如,Shoppable_Video_light
查看器预设允许您播放视频,视频旁边有一个白色显示区域。 该显示区域用于在播放视频时,显示可点击的缩略图。通过Shoppable_Video_dark
查看器预设,您可以在视频旁边播放带有黑色显示区域的视频。
如果您创建了自己的交互式视频查看器预设,则可以在预设列表中查看该预设,您可以从中进行选择。
完成后,点按保存。
在保存交互式视频时,会自动保存 .vtt
一个关联的文件。 将.vtt
文件保存到Assets根文件夹的_VTT
文件夹中。 要在网站上正确播放交互式视频,必须填写文件和文件夹。 因此,请勿移动、编辑或删除文件夹 _VTT
或其内容。
发布交互式视频。发布后会创建嵌入代码或URL,您最终可以将其复制并粘贴到您的网站体验。
如果您使用“快速视图”添加了交互性,则只使用嵌入代码;如果您是通过超链接的网页添加交互性的,则还可以使用已发布的URL。 但是,请注意,如果您的交互式内容包含与相对URL(尤其是指向Experience Manager站点页面的链接)的链接,则无法使用基于URL的链接方法。
请参阅发布资产。
要发布包含快速视图的购物视频,请确保您还从您的商务区域单独发布每个视频的相关图像资产。
在添加时间轴区段并发布交互式视频后,您便可以将其添加到您的现有网站登录页面。请参阅将交互式视频与您的网站集成。
有关如何发布交互式视频资产的详细信息,请参阅发布资产。
现在,在上传视频、向视频添加时间轴区段并发布交互式视频后,您便可以将其添加到您的现有网站。
如果您是Experience Manager站点客户,则可以通过将交互式媒体组件拖动到页面来添加交互式视频。 请参阅将Dynamic Media资产添加到页面。
如果您是独立的Experience Manager资产客户,您可以按本节所述手动将交互式视频添加到您的网站。
如果您使用“快速视图”添加了交互性,则只使用嵌入代码;如果您是通过超链接的网页添加交互性的,则还可以使用已发布的URL。 但是,请注意,如果您的交互式内容包含与相对URL(尤其是指向Experience Manager站点页面的链接)的链接,则无法使用基于URL的链接方法。
在目标网页代码中,找到静态视频所在的位置。
删除静态视频,并将该代码原封不动地替换为您从Experience Manager资产中复制的嵌入代码或URL。
复制的嵌入代码是为响应式环境设置的,因此它会自动适应之前由静态视频占用的区域。
至此,如果您只是通过超链接的网页添加交互性,您就已经完成了所有操作。
但是,如果您添加任何交互性以触发快速视图,则交互式视频旁边的缩略图仅用于显示目的;它们尚未与您现有的Quick视图集成。 在这种情况下,您必须将交互式视频与您网站上的现有快速视图集成。
示例
以演示网站为例:
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>
集成过程很简单,只需删除视频嵌入代码,然后将其替换为Experience Manager中的交互式视频嵌入代码。 您可以在以下URL查看结果。 尽管该视频在页面上显示交互式视频,但尚未与现有的快速视图集成:
https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-1.html
此任务仅在您是独立Experience Manager资产客户时适用。
此过程的最后一步是将交互式视频与网站上使用的现有快速视图实施相集成。 但是,没有任何一种集成解决方案是在所有情况下都适用的。每个快速视图实施都是独一无二的。 因此,需要一种具体的方法,需要前端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
//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:
单个 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;
},
}); |
触发“快速视图URL”并激活“快速视图”面板的最后一步操作,极有可能需要IT部门的前端IT人员的协助。他们最了解如何通过拥有现成的快速视图URL从正确的步骤准确触发快速视图实施。
您可以了解如何将这些步骤应用到演示网站,以将交互式视频与快速视图代码完全集成。 在本主题的前面,快速视图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()
函数调用触发“快速视图”对话框。 此函数只采用一个参数,即快速视图数据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
,并直接附加到文档BODY
的quickview-modal ID。 因此,将该对话框移动到查看器容器的代码与以下代码一样简单:
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
请参阅使用快速视图创建自定义弹出窗口。
—>