交互式视频

交互式视频查看器是一种视频播放器，可播放以H.264格式编码的流视频和渐进视频。

查看器还会在视频内容旁边显示交互式产品样本。 支持单个视频和自适应视频集。 它设计为可在支持HTML5视频的桌面和移动Web浏览器上工作。 查看器支持在视频内容、视频章节导航和社交共享工具顶部显示的可选隐藏字幕。 此查看器旨在帮助您实施“可购物视频”体验。 也就是说，用户可以选择与特定视频时间区域关联的色板，并重新定向到客户网站上的概览或产品详细信息页面。

查看器类型为510。

演示URL

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/glacier/InteractiveVideoViewerDemo.html?lang=zh-Hans?lang=zh-Hans

和

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/AXIS/index.html?lang=zh-Hans?lang=zh-Hans

系统要求

参见 系统要求.

使用交互式视频查看器

交互式视频查看器表示一个主JavaScript文件以及查看器在运行时下载的一组帮助程序文件。 此特定查看器、资源和CSS使用的所有Viewer SDK组件都包含单个JavaScript。

交互式视频查看器可在弹出模式下使用，方法是使用随图像服务查看器提供的生产就绪HTML页面。 它还可以在嵌入式模式下使用，在该模式下，使用文档记录的API将其集成到目标网页中。

配置和外观设计类似于本指南中介绍的其他查看器。 所有外观设计都是通过自定义(CSS)层叠样式表实现的。

参见 所有查看器通用的命令引用 — 配置属性 和 所有查看器通用的命令引用 — URL

与交互式视频查看器交互

交互式视频查看器为视频播放提供一组标准的用户界面控件，如播放/暂停按钮、视频清理器、视频时间气泡、播放时间/总时间指示器、音量控件、全屏按钮和隐藏式字幕切换开关。 所有这些控件都分组到直接位于主视图下的控件栏中。

在触控设备上，音量控制从用户界面中隐藏，因为只能使用设备的硬件按钮来控制音量。

当查看器以弹出模式运行时，全屏按钮在用户界面中不可用。

查看器会在视频查看区域的右侧显示一个带有交互式样本的面板。 样本列表会在视频播放时自动前进，以便显示对应于当前视频区域的样本。 单击或点按样本会触发在创作期间与此类样本关联的操作。 根据您的设置方式，触发器可能会重定向到网站上的其他页面。 或者，它可能会将产品信息传递回网页逻辑，从而触发显示相关产品内容的概览打开。

可以在激活视频章节时快速浏览视频内容。 视频章节在视频洗刷跟踪中作为标记显示，并在变换时（或在点按触摸系统时）显示章节标题和描述。 客户可以通过单击章节标记或点按章节描述气泡来“搜寻”特定章节。

查看器还支持各种社交媒体共享工具。 它们可用作用户界面中的单个按钮，当用户单击或点按时，该按钮将扩展为共享工具栏。 共享工具栏中包含每个受支持共享渠道类型的图标，例如Facebook、Twitter、电子邮件共享、嵌入代码共享和链接共享。 激活电子邮件共享、嵌入共享或链接共享工具后，查看器会显示一个模式对话框，其中包含相应的数据输入表单。 调用Facebook或Twitter时，查看器会将用户从社交媒体服务重定向到标准共享对话框。 此外，当共享工具被激活时，视频播放会自动暂停。 由于Web浏览器安全限制，共享工具在全屏模式下不可用。

查看器完全可使用键盘。 参见 键盘辅助功能和导航.

嵌入交互式视频查看器

交互式视频查看器将嵌入到托管页面中。 这样的网页可以具有静态布局，或者它可以“响应”并且在不同设备或不同浏览器窗口大小上以不同的方式显示。

为了满足这些需求，查看器支持两种主要操作模式：固定大小嵌入和响应式嵌入。

关于固定大小嵌入模式和响应式设计嵌入模式

在嵌入式模式下，查看器将添加到现有网页，该网页可能已有某些与查看器无关的客户内容。 查看者通常只占用网页的一部分空间。

主要用例是面向台式机或平板电脑设备的网页，以及根据设备类型自动调整布局的响应式设计页面。

当查看器在初始加载后未更改其大小时，使用固定大小嵌入。 此功能是拥有静态布局的网页的最佳选择。

响应式设计嵌入假定查看器需要在运行时调整大小以响应其容器的大小更改 DIV. 最常见的用例是将查看器添加到使用灵活页面布局的网页。

在响应式设计嵌入模式下，查看器的行为方式有所不同，具体取决于网页确定其容器大小的方式 DIV. 如果网页仅设置容器的宽度 DIV如果不限制高度，查看器会根据所用资源的纵横比自动选择高度。 此功能可确保资源完全适合视图，而不用填充边距。 此用例最常用于使用响应式Web设计布局框架(如Bootstrap和Foundation)的网页。

否则，如果网页同时设置了查看器容器的宽度和高度 DIV，则查看器仅填充该区域，并遵循网页布局提供的大小。 一个很好的示例是将查看器嵌入到模式叠加中，其中叠加根据Web浏览器窗口大小调整大小。

固定大小嵌入

通过执行以下操作将查看器添加到网页：

1. 将查看器JavaScript文件添加到网页。

2. 定义容器 DIV.

3. 设置查看器大小。

4. 创建和初始化查看器。

5. 将查看器JavaScript文件添加到网页。

   创建查看器需要您在HTML头中添加脚本标记。 在使用查看器API之前，请确保包括 InterativeVideoViewer.js. 此 InteractiveVideoViewer.js 文件位于 html5/js/ 标准IS-Viewers部署的子文件夹：

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js

如果查看器部署在一台Adobe Dynamic Media Classic服务器上，并且来自同一域，则可以使用相对路径。 否则，请指定已安装IS-Viewers的某个Adobe Dynamic Media Classic服务器的完整路径。

相对路径如下所示：

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

1. 定义容器 DIV.

   添加空 DIV 元素到您希望查看器显示的页面。 此 DIV 元素必须定义其ID，因为此ID稍后会被传递到查看器API。 DIV的大小通过CSS指定。

   占位符 DIV 是一个定位元素，这意味着 position CSS属性设置为 relative 或 absolute.

   要使全屏功能在Internet Explorer中正常工作，请确保DOM中没有其他元素的栈栈顺序高于占位符 DIV.

   以下是定义的占位符示例 DIV 元素：

   <div id="s7viewer" style="position:relative"></div>
   

2. 设置查看器大小

   通过声明查看器的静态大小，可以将其设置为 .s7interactivevideoviewer 以绝对单位表示的顶级CSS类，或者使用 stagesize 修饰符。

   您可以直接在“HTML”页面上设置CSS大小。 或者，您可以将其放入自定义查看器CSS文件中，稍后将该文件分配给Adobe Experience Manager Assets中的查看器预设记录（按需），或者使用进行明确传递 style 命令。

   参见 自定义交互式视频查看器 有关使用CSS为查看器设置样式的更多信息。

   以下是在“HTML”页中定义静态查看器大小的示例：

   #s7viewer.s7interactivevideoviewer {
    width: 640px;
    height: 640px;
   }
   

   您可以设置 stagesize Experience Manager Assets中的查看器预设记录中的修饰符 — 按需。 或者，您可以使用查看器初始化代码显式传递它 params 收藏集，或作为API调用，如命令引用部分中所述，如下所示：

   interactivevideoviewer.setParam("stagesize", "640,640");
   

   建议使用基于CSS的方法，并用于此示例。

3. 创建和初始化查看器。

   完成上述步骤后，您将创建一个实例 s7viewers.InteractiveVideoViewer 类，将所有配置信息传递到其构造函数，并调用 init() 方法。 配置信息作为JSON对象传递给构造函数。 此对象至少应具有 containerId 保存查看器容器ID名称并嵌套的字段 params 具有查看器支持的配置参数的JSON对象。

   在本例中， params 对象必须至少将图像服务URL传递为 serverUrl 资产，而初始资产为 asset 参数。 基于JSON的初始化API允许您通过作为传递的一行代码（视频服务器URL）创建和启动查看器。 videoserverurl 资产，初始资产为 asset 参数，交互式数据为 interactivedata 属性。 基于JSON的初始化API允许您使用一行代码创建和启动查看器。

   务必要将查看器容器添加到DOM，以便查看器代码可以按其ID查找容器元素。 某些浏览器会延迟构建DOM，直到网页结尾。 要获得最大的兼容性，请调用 init() 紧靠结束位置之前的方法 BODY 标签上，或正文上 onload() 事件。

   同时，容器元素还不一定是网页布局的一部分。 例如，可使用以下方式隐藏该内容： display:none 为其分配的样式。 在这种情况下，查看器会延迟其初始化过程，直到网页将容器元素带回布局为止。 之后，查看器加载会自动继续。

   以下示例介绍了如何创建查看器实例，将所需的最少配置选项传递给构造函数并调用 init() 方法。 此示例假定以下各项：

   • 查看器实例为 interactiveVideoViewer.
   • 占位符的名称 DIV 是 s7viewer.
   • 图像服务URL是 https://aodmarketingna.assetsadobe.com/is/image/.
   • 视频服务器URL为 https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna.
   • 内容URL https://aodmarketingna.assetsadobe.com/.
   • 资产是 /content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4.
   • 交互式数据是 is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt.

   <script type="text/javascript">
   var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
    "containerId":"s7viewer",
   "params":{
    "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
   "config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
    "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
    "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
    "contenturl":"https://aodmarketingna.assetsadobe.com/",
   "interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
   }
   }).init();
   </script>
   

   以下代码是一个简单网页的完整示例，该网页以固定大小嵌入交互式视频查看器：

   <!DOCTYPE html>
   <html>
   <head>
   <script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
   <style type="text/css">
   #s7viewer.s7interactivevideoviewer {
    width: 640px;
    height: 480px;
   }
   </style>
   </head>
   <body>
   <div id="s7viewer" style="position:relative;"></div>
   <script type="text/javascript">
   var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
    "containerId":"s7viewer",
   "params":{
    "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
   "config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
    "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
    "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
    "contenturl":"https://aodmarketingna.assetsadobe.com/",
   "interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
   }
   }).init();
   </script>
   </body>
   </html>
   

高度不受限制的响应式设计嵌入

通过响应式设计嵌入，网页通常具有某种灵活的布局，可指定查看器容器的运行时大小 DIV. 对于以下示例，假设网页允许查看器的容器 DIV 将网页浏览器窗口大小的40%保留为无限制高度。 网页HTML代码如下所示：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

将查看器添加到此类页面与固定大小嵌入的步骤类似。 唯一的区别是，您不需要显式定义查看器大小。

1. 将查看器JavaScript文件添加到网页。
2. 定义容器DIV。
3. 创建和初始化查看器。

上述所有步骤与固定大小的嵌入步骤相同。 将容器DIV添加到现有 "holder" DIV。 以下代码是一个完整的示例。 请注意浏览器调整大小时查看器大小的变化情况，以及查看器长宽比与资源的匹配情况。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
"config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
 "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
 "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
 "contenturl":"https://aodmarketingna.assetsadobe.com/",
"interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
}
}).init();
</script>
</body>
</html>

以下示例页面说明了高度不受限制的响应式设计嵌入的更多实际用途：

实时演示

备用演示位置

定义宽度和高度的响应式嵌入

如果有定义了宽度和高度的响应式嵌入，则网页样式会不同。 它将两种大小提供给 "holder" 在浏览器窗口中进行DIV和居中对齐。 此外，该网页还设置 HTML 和 BODY 元素为100%。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

其余嵌入步骤与用于高度不受限制的响应式嵌入的步骤相同。 产生的示例如下：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4",
"config":"/etc/dam/presets/viewer/Shoppable_Video_Dark",
 "serverurl":"https://aodmarketingna.assetsadobe.com/is/image/",
 "videoserverurl":"https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
 "contenturl":"https://aodmarketingna.assetsadobe.com/",
"interactivedata":"is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt"
}
}).init();
</script>
</body>
</html>

使用基于Setter的API进行嵌入

可以使用基于setter的API和no-args构造函数，而不是使用基于JSON的初始化。 使用此API构造函数不接受任何参数，并且配置参数是使用 setContainerId()， setParam()、和 setAsset() API方法具有单独的JavaScript调用。

以下示例说明了如何将固定大小嵌入与基于setter的API结合使用：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<style type="text/css">
#s7viewer.s7interactivevideoviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var interactiveVideoViewer = new s7viewers.InteractiveVideoViewer();
interactiveVideoViewer.setContainerId("s7viewer");
interactiveVideoViewer.setParam("config", "/etc/dam/presets/viewer/Shoppable_Video_Dark");
interactiveVideoViewer.setParam("serverurl", "https://aodmarketingna.assetsadobe.com/is/image/");
interactiveVideoViewer.setParam("videoserverurl", "https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna");
interactiveVideoViewer.setParam("contenturl", "https://aodmarketingna.assetsadobe.com/");
interactiveVideoViewer.setParam("interactivedata", "is/content/content/dam/mac/aodmarketingna/_VTT/dm-viewers-content/video/Glacier.mp4.svideo.vtt");
interactiveVideoViewer.setAsset("/content/dam/mac/aodmarketingna/dm-viewers-content/video/Glacier.mp4");
interactiveVideoViewer.init();
</script>
</body>
</html>

Business.Adobe.com 资源

Asset Collections Managed Cloud Dynamic Forms Content Management Digital Rights Management Headless Cms