查看器预设是设置集合,用于确定用户在其计算机屏幕和移动设备上查看富媒体资产的方式。 如果您是管理员,则可以创建查看器预设。 设置可用于一系列查看器配置选项。 例如,您可以更改查看器的显示大小或缩放行为。
另请参阅 Dynamic Media查看器参考指南.
本节介绍如何创建、编辑和管理查看器预设。 您可以随时将查看器预设应用于资产,以对其进行预览。 参见 应用查看器预设.
编辑任意 预定义的、开箱即用的查看器预设 不受支持的方案。 如果尝试编辑现成的查看器预设,系统会提示您使用新名称保存查看器预设。
所有开箱即用的查看器都支持键盘辅助功能。
另请参阅 键盘辅助功能和导航.
您可以通过导航到,在Adobe Experience Manager中添加、编辑、删除、发布、取消发布和预览查看器预设 工具 (锤子图标)> 资产 > 查看器预设.
默认情况下,当您在资产的详细信息视图中选择查看器时,系统会显示15个查看器预设。 您可以提高此限制。参见 增加显示的查看器预设数.
不同的网页具有不同的需求。 例如,有时您需要一个网页,该网页会提供一个链接,在单独的浏览器窗口中打开HTML5查看器。 在其他情况下,需要将HTML5查看器直接嵌入到托管页面上。 在后一种情况下,网页具有静态布局。 或者,它是“响应式”的,在不同的设备或不同的浏览器窗口大小中显示的方式不同。 为了满足这些需求,Dynamic Media附带的所有预定义、开箱即用的HTML5查看器都支持静态网页和响应式设计的网页。
参见 响应式静态图像库 在 Dynamic Media图像服务和渲染API帮助 有关如何将响应式查看器嵌入到网页的更多信息。
先发布所有现成的查看器,然后再将其用于第一个查看器。
参见 发布查看器预设.
Dynamic Media随附的所有现成查看器预设与以下系统完全兼容:
在创建查看器预设时,管理员可以添加和自定义以下富媒体类型。
轮播集 |
将热点、图像映射(或两者)添加到一系列两个或多个图像中。 客户可以向左或向右平移图像,然后在图像上选择热点以获取更多详细信息或直接从网站的登陆、类别或主页购买。 |
尺寸 |
显示允许您旋转、平移、缩放或重新居中相机的3D场景。 |
弹出缩放 | 在原始图像旁边显示缩放区域的第二个图像。 没有要使用的控件 — 用户将选定内容移动到要查看的区域上方。 在确定此查看器的完整带宽使用情况时,请考虑主图像和弹出图像均在查看器中提供。 主图像大小(舞台宽度和高度)和缩放因子决定弹出图像大小。 为避免弹出文件变得过大,请平衡这两个值:如果主图像大小很大,请降低“缩放因子”值。 (“弹出宽度”和“弹出高度”决定了弹出窗口的大小,而不是提供给查看器的弹出图像的大小。) 例如,如果主图像大小为350 x 350像素,缩放因子为3,则生成的弹出图像为1050 x 1050像素。 如果您的主图像大小为300 x 300像素,缩放因子为4,则弹出图像为1200 x 1200像素。 根据JPEG质量设置(推荐的设置介于80-90之间),您可以显着减小文件大小。 推荐的缩放因子为2.5到4,具体取决于主图像的大小。 |
内联缩放 | 在原始查看器中显示缩放区域的图像。 没有要使用的控件。 也就是说,用户将选定内容移动到要查看的区域上方。 |
图像集 | 在图像集查看器中,用户通过选择缩略图图像可以查看项目的不同视图或颜色变体。 此查看器还提供了用于仔细检查图像的缩放工具。 |
交互式图像 | 将热点添加到图像的某些部分,然后客户可以选择这些部分以获取更多详细信息或直接从网站的登陆、类别或主页购买。 |
交互式视频 | 缩略图会添加到视频中的时间轴区段,然后客户可以选择这些区段以获取更多详细信息或直接从网站的登陆、类别或主页购买。 |
混合媒体 | 在一个查看器中显示不同类型的媒体。 可以包括旋转集、图像集、图像和视频。 |
全景图像 | 全景图像和PanoramicVR查看器渲染球面全景图像,让用户沉浸在房间、属性、位置或景观的360°观看体验中。 对于上传的图像而言,要使其符合球面全景图的条件,该图像必须具有以下一项或两项内容:
纵横比和关键字条件都适用于资产详细信息页面和“全景媒体”WCM组件的全景资产。 |
智能裁剪视频 |
使用此查看器可自动检测和裁切任何视频中的焦点。 |
旋转集 | 提供图像的多个视图,以便用户可以旋转对象来检查不同的边和角度。 |
360视频 | 使用360/VR视频查看器渲染等矩形视频,获得房间、财产、位置、景观或医疗过程的沉浸式观看体验。 在平面显示器上播放期间,用户可控制视角。 移动设备上的播放使用其内置的陀螺仪控件。 查看器包括对360个视频资产交付的本机支持。 默认情况下,查看或播放无需其他配置。 您可使用标准视频扩展名(如.mp4、.mkv和.mov)来交付360视频。 最常见的编解码器是H.264。 |
视频 | 使用渐进式或自适应比特率流播放视频。 自适应比特率流自动执行设备和带宽检测,以正确格式提供正确质量的视频。 |
垂直缩放 | 垂直缩放查看器允许您最大化产品图像查看体验,以便为用户提供最佳的产品呈现方式。 样本的垂直位置执行以下操作:
|
缩放 | 允许用户通过选择区域来放大该区域。 用户可以选择控件以放大、缩小图像,以及将图像重置为其默认大小。 |
下表标识了Dynamic Media随附的所有预定义的现成查看器预设。
另请参阅 实时演示.
有关查看器支持的Web浏览器和操作系统版本的信息,您可以查看查看器发行说明。
请参阅目录中的“查看器发行说明”。 查看器参考指南.
Dynamic Media中的所有现成查看器预设都会激活(打开),但您必须发布它们。
参见 发布查看器预设.
您创建和添加的任何新查看器预设都必须激活和已发布。
参见 激活或取消激活查看器预设 和 发布查看器预设.
查看器预设标题 | 类型 | CSS 文件名称 |
Carousel_Dotted_dark | Carusel_Set | html5_carouselviewer_dotted_dark.css |
Carousel_Dotted_light | Carusel_Set | html5_carouselviewer_dotted_light.css |
Carousel_Numeric_dark | Carusel_Set | html5_carouselviewer_numeric_dark.css |
Carousel_Numeric_light | Carusel_Set | html5_carouselviewer_numeric_light.css |
弹出 | Flyout_Zoom | html5_flyoutviewer.css |
图像集_dark | 图像集 | html5_zoomviewer_dark.css |
ImageSet_light | 图像集 | html5_zoomviewer_light.css |
InlineMixedMedia_dark | 混合媒体 | html5_inlinemixedmediaviewer_dark.css |
InlineMixedMedia_light | 混合媒体 | html5_inlinemixedmediaviewer_light.css |
InlineZoom | Flyout_Zoom | html5_inlinezoomviewer.css |
MixedMedia_dark | 混合媒体 | html5_mixedmediaviewer_dark.css |
MixedMedia_light | 混合媒体 | html5_mixedmediaviewer_light.css |
全景图像 | Panoramic_Image | html5_panoramicimage.css |
PanoramicImageVR | Panoramic_Image | html5_panoramicimage.css |
Shoppable_Banner | Interactive_Image | html5_interactiveimage.css |
Shoppable_Video_dark | 交互式视频 | html5_interactivevideoviewer_dark.css |
Shoppable_Video_light | 交互式视频 | html5_interactivevideovewer_light.css |
旋转集_深色 | 旋转集 | html5_spinviewer_dark.css |
SpinSet_light | 旋转集 | html5_spinviewer_light.css |
视频 (包括对隐藏式字幕的支持) |
视频 | html5_videoviewer.css |
Video360_social (包括基本视频播放控制,视频渲染以立体声模式完成,手动视点控制关闭但陀螺控制开启,并且无社交媒体功能) |
Video_360 | html5_video360viewersocial.css |
Video360VR (专为使用虚拟现实眼镜的最终用户而设计。 包括基本视频播放控件和社交媒体功能) |
Video_360 | html5_video360viewer.css |
Video_social (包括对隐藏式字幕和社交媒体的支持) |
视频 | html5_videoviewersocial.css |
Zoom_dark |
缩放 |
html5_basiczoomviewer_dark.css |
Zoom_light |
缩放 | html5_basiczoomviewer_light.css |
ZoomVertical_dark |
Vertical_Zoom | html5_zoomverticalviewer_dark.css |
ZoomVertical_light | Vertical_Zoom | html5_zoomverticalviewer_light.css |
下表标识了iOS、Android™ 2.x和Android™ 3.x设备支持的移动设备查看器手势。
笔势 | 弹出缩放 | 缩放 | 旋转 |
拖动 |
Pan |
Pan |
Pan |
点按 |
显示弹出窗口 |
显示或隐藏用户界面 |
显示或隐藏用户界面 |
双击 |
不适用 |
放大或重置 |
放大或重置 |
捏紧打开 |
不适用 |
放大(仅限iOS和Android™ 3x) |
放大(仅限iOS和Android™ 3x) |
捏合关闭 |
不适用 |
缩小(仅限iOS和Android™ 3倍) |
缩小(仅限iOS和Android™ 3倍) |
轻扫 |
滚动样本栏 |
滚动图像 |
旋转 |
笔触 |
滚动样本栏 |
滚动图像 |
旋转 |
Experience Manager在查看资源时会显示各种查看器预设 详细信息视图 > 查看器. 您可以增加或减少显示的查看者数量。
要增加显示的查看器预设数,请执行以下操作:
导航到CRXDE Lite(https://localhost:4502/crx/de)。
导航到查看器预设列表节点,网址为 /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist
在 limit 属性中,将默认设 置为15的Value(值)更改为所需的数字。
导航到位于的查看器预设数据源 /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource
在limit属性中,将数字更改为所需的数字,例如 {empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}
选择 全部保存.
通过创建查看器预设,可应用各种设置以查看资产并与资产交互。 但是,您无需创建查看器预设。 如果您愿意,可以使用Experience Manager Assets附带的默认现成查看器预设。
如果选择创建查看器预设,则在保存该预设后,查看器的状态会自动激活(设置为 日期)。 此状态表示在Dynamic Media组件和Interactive Media组件中以及预览图像或视频时,它是可见的。
某些查看器预设具有独占设置,这些设置可能会影响查看器的使用方式和整体行为。 根据您创建的查看器预设,您需要了解这些特殊注意事项。
要创建查看器预设,请执行以下操作:
在Experience Manager的左上角,选择Experience Manager徽标,然后在左边栏中,转到 工具 (锤子图标)> 资产 > 查看器预设.
在“查看器预设”页面的工具栏上,选择 创建.
在 新建查看器预设 对话框,在 预设名称 字段中,输入新预设的名称。 请仔细选择名称 — 选择后它们将无法编辑 创建.
稍后在这些步骤中保存预设时,该名称将显示在“查看器预设”页面的“预设标题”列标题下。
在富媒体类型下拉菜单中,选择要创建的查看器预设的类型,然后在页面的右上角选择 创建.
参见 查看器预设的富媒体类型.
在“查看器预设编辑器”页面上,选择 外观 选项卡。
执行下列操作之一:
在 选定的类型 在下拉菜单中,选择要自定义其可视化设计的组件。 或者,您可以选择查看器中的任何可视元素,以选择它进行配置。
通过可视编辑器,可查看特定属性对样式有何影响。 设置或调整任何属性,以使用编辑器左侧的示例立即查看其对查看器有何影响。
有关每种类型的查看器预设的CSS样式属性,请参阅自定义 <viewer name>
中的“查看器”帮助主题 查看器参考指南. 例如,如果您创建的查看器预设类型为 Mixed_Media
,请参见 自定义混合媒体查看器 以获取每个属性的列表和说明。
如果您在单独的CSS文件中定义了样式设置,则可以将CSS文件上传到Experience Manager Assets。 要查找上传的CSS文件并将其与查看器预设关联,请选择 导入CSS 在 选定的类型 下拉菜单(如有必要,向上滚动可视编辑器以查看它)。
导入CSS文件时,可视编辑器将检查CSS是否使用正确的查看器标记。 例如,如果您正在创建缩放查看器,则必须使用其查看器类名称定义导入的所有CSS规则 .s7mixedmediaviewer
在父查看器元素上定义。
您可以导入任意的手工制作CSS,只要它正确定义给定查看器的CSS标记即可。 (CSS标记在任何“自定义 <viewer name=""> 中的“查看器”帮助主题 查看器参考指南. 例如,如果您想阅读有关缩放查看器的CSS标记的信息,请参阅 自定义缩放查看器.) 但是,可视化编辑器可能并不了解某些CSS值。 在这种情况下,可视编辑器会尝试覆盖错误,以便CSS仍然可用。
如果您希望直接在其原始表单中编辑CSS,请选择 显示/隐藏CSS 在“Selected Type(选定类型)”下拉菜单下(如有必要,向上滚动可视编辑器以查看它)。
与可视编辑器一样,当您直接在CSS中更改属性时,可以立即看到它对查看器示例有何影响。 并且,该属性会在可视编辑器中同时自动更新。 因此,您可以使用原始CSS编辑器或可视编辑器,也可以交替使用两者。
对于按钮图稿,请选择2倍的图像并上传高分辨率图稿。 使用交互式图像和购物横幅时,您还可以从各种现成的热点按钮中进行选择。
(可选)在“编辑查看器预设”页面顶部附近,选择 桌面, 平板电脑,或 电话 为不同的设备和屏幕类型唯一定义可视样式。
在“查看器预设编辑器”页面上,选择 行为 选项卡。 或者,您可以选择查看器中的任何可视元素,以选择它进行配置。
例如,对于 Videoplayer 类型,在下 修饰符 > 播放,您可以从以下三个自适应比特率流选项中进行选择:
要查看和使用 短划线 选项,必须先由您帐户上的Adobe技术支持启用。 参见 在您的帐户上启用DASH.
从选定类型下拉菜单中,选择要更改其行为的组件。
可视编辑器中的许多组件都有一个与之关联的详细说明。 展开组件以显示其关联参数时,这些描述会显示在蓝色框内。
有些“查看器类型”具有的组件允许您在 IS 命令文本字段中指定“图像提供”命令。有关可使用的命令列表,请参阅图像提供 API 参考。
如果您使用的是触摸设备,例如手机或平板电脑……
在文本字段中键入值后,选择用户界面中的其他位置以提交更改并关闭虚拟键盘。 如果您选择 输入,则不会发生任何操作。
在页面的右上角附近,选择 保存.
发布您的新查看器预设。 必须发布预设,以便您可以在网站上使用其生成的URL。
参见 发布查看器预设.
对于使用自适应比特率流配置文件的旧视频,URL将继续像往常一样播放(通过HLS流播放),直到您满意为止 重新处理视频资产. 重新处理之后,同一URL将继续工作,但现在 两者 已启用DASH和HLS流。
关于面板中图像缩略图的显示模式:
创建或编辑交互式视频查看器预设时,可以选择要使用的显示模式设置。 当您选择时,会发生此选择 InteractiveSwatches
从 选定的组件 下的下拉菜单 行为 选项卡。 您选择的显示模式会影响视频播放时缩略图的显示方式和显示时间。 您可以选择 segment
显示模式(默认)或 continuous
显示模式。
显示模式 | 描述 |
市场细分 |
在此模式下,假设分配给视频区段的缩略图数量少于显示面板中的可见点数量。 在这种情况下,来自下一个或上一个子区段的缩略图包括 非 拉入以填充面板中的任何空点。 即,它保留分配给特定视频区段的样本的显示。 |
连续 | In 此 本主题中的视频 是 |
关于交互式视频查看器中的自动滚动行为:
在交互式视频查看器中,缩略图的自动滚动行为独立于您选择的显示模式。
创建或编辑交互式视频查看器预设时,您可以从“行为”选项卡访问“自动滚动”。在行为选项卡中,从 选定的组件 下拉菜单,选择 交互式样本. “自动滚动”复选框列在“IS 命令”文本字段的下方。
如果在查看器预设中禁用自动滚动(清除复选框),则在用户播放视频时,该面板仅显示整个视频长度的第一个缩略图。但是,如果需要,用户可以使用向上和向下箭头图标手动滚动缩略图。
在查看器预设中启用(选择)自动滚动后,在视频播放过程中,分配给视频区段的缩略图图像会在区段开始时滚动到视图中。但是,在某些情况下,区段内某些缩略图的显示时间是其之前或之后缩略图显示时间的两倍。发生此行为的原因是区段中缩略图的数量大于面板中可见缩略图的数量,且不可平均分割。
举例说明,假设您有一个30秒的视频区段。 在30秒内总共有九个缩略图可供显示。 您的浏览器的大小决定了显示面板中有四个可见的缩略图位置。 将30秒的视频时间段划分为三个子段。 下表显示了给定时间子区段显示哪些缩略图的划分方式:
视频子区段 | 子区段时间(以秒为单位) | 在面板中可见的缩略图 |
---|---|---|
1 | 0-10 | 1, 2, 3, 4 |
2 | 10-20 | 4, 5, 6, 7 |
3 | 20-30 | 6, 7, 8, 9 |
视频子区段3的扩展范围不会超出分配给它的缩略图。 另请注意,缩略图4、6和7在面板中的可见时间是其他缩略图的两倍。
查看器用于根据可用位置数量在面板中显示缩略图的逻辑如下:
子区段数=向上舍入到下一个子区段(缩略图数量/缩略图面板中的可见插槽数量,基于浏览器窗口大小)。
根据上表中的示例,9缩略图/ 4插槽= 2.25;查看器逻辑将其四舍五入到三个子区段。
缩略图数=向上舍入到下一个缩略图(缩略图数/视频子区段数)。
根据上表中的示例,9缩略图/ 3视频子区段= 3缩略图。
子区段的持续时间=视频总持续时间/视频子区段数。
使用上表中的示例,30秒/3个视频子区段=每个视频子区段的10秒显示。
创建轮播横幅查看器预设时,可以按如下方式访问更改热点的样式:
描述 | 操作 | |
---|---|---|
热点图标 | 更改用于热点的图标 | 要更改热点图标图像,请在 外观 选项卡,在 选定的组件,选择 ImageMapEffect. 下 图标,选择 背景 和 图像 字段导航到所需的背景图像。 |
用户界面中可用的查看器预设取决于哪些查看器预设在创作模式下处于活动状态。 默认情况下,查看器预设在创建后为“开”。 如果关闭预设,则在“创作”模式下不会看到该预设。 如果发布预设,则无论预设是打开还是关闭,都会发布预设。 如果列表变得太笨重或您不希望查看器预设可用,请取消激活查看器预设。
要激活或取消激活查看器预设,请执行以下操作:
在Experience Manager的左上角,选择Experience Manager徽标,然后在左边栏中选择 工具 (锤子图标)> 资产 > 查看器预设.
在“查看器预设”页面的 状态 列标题中,选择用于激活或停用查看器预设的切换开关。
已激活的查看器预设会在右侧显示切换,位于蓝色框内;已停用的查看器预设会在左侧显示切换,位于浅灰色框内。
激活(或打开)查看器预设的状态意味着查看器预设在Dynamic Media组件、交互式媒体组件中可见,并且无论何时查看资源均可见。
但是,到 deliver 作为带有查看器预设的资产,还必须发布查看器预设。 必须激活所有查看器预设 和 已发布,以获取资产的URL或嵌入代码。 激活和发布Dynamic Media附带的所有现成查看器预设。 您创建和添加的自定义查看器预设将自动激活,但也必须发布。
参见 激活或停用查看器预设.
另请参阅 预览资源.
要发布查看器预设,请执行以下操作:
编辑任意 预定义的、开箱即用的查看器预设 不受支持的方案。 如果您编辑现成的查看器预设,系统会提示您使用新名称保存该预设。
要编辑查看器预设,请执行以下操作:
在Experience Manager的左上角,选择Experience Manager徽标,然后在左边栏中选择 工具 (锤子图标)> 资产 > 查看器预设.
通过选中查看器预设标题左侧的框来选择预设。
在工具栏上,选择 编辑.
在 查看器预设编辑器 页面上,使用可在页面上的选项对查看器预设进行所需的更改 外观 和 行为 选项卡。
从 外观 选项卡,在查看器预设编辑器页面的左上角附近,选择 桌面, 平板电脑,或 电话 以更改资产的显示模式。
在页面的右上角附近,执行下列操作之一:
您可以删除已创建并添加到Dynamic Media中的查看器预设。
要删除自定义查看器预设,请执行以下操作:
如果已发布资产和选定的查看器,则在选择查看器预设后 将显示 “ URL ”和“嵌入”按钮。
要将查看器预设应用于资产,请执行以下操作:
打开资产,在页面的左上角附近,选择下拉菜单,然后选择 查看器.
如果已发布资产和选定的查看器,则在选择查看器预设后 将显示 “ URL ”和“嵌入”按钮。
要将其应用于资源,请从左窗格中选择查看器预设。
您可以 复制要共享的URL 和其他用户。
要获取查看器预设的URL,请参阅 将URL链接到您的Web应用程序. 另请参阅 在网页上嵌入视频查看器.
如果您将Experience Manager用作WCM,则可以直接在页面上使用查看器预设添加资源。 参见 将Dynamic Media资源添加到页面.