查看器预设是一组设置,用于确定用户在其计算机屏幕和移动设备上查看富媒体资产的方式。如果您是管理员,则可以创建查看器预设。设置适用于查看器配置选项数组。例如,您可以更改查看器的显示大小或缩放行为。
有关创建和自定义您自己的HTML5查看器预设的说明,请参阅AdobeDynamic Media HTML5查看器SDK API文档。 该SDK位于嵌入在SDK中的IS发布服务器上。 每个库版本都包含其自己的SDK文档。
路径: <scene7_domain>/s7sdk/<library_version>/docs/jsdocs/index.html
.
例如,3.10 SDK:https://s7d1.scene7.com/s7sdk/3.10/docs/jsdoc/index.html
另请参阅《AdobeDynamic Media查看器参考指南》。
本节介绍如何创建、编辑和管理查看器预设。 无论您何时预览资产,都可以将查看器预设应用到资产。 请参阅应用查看器预设。
不支持编辑任何预定义的现成查看器预设*。*如果您尝试编辑现成的查看器预设,系统会提示您使用新名称保存查看器预设。
所有现成的查看器都支持键盘辅助功能。
另请参阅键盘辅助功能和导航。
您可以通过点按工具(锤子图标)> 资产 > 查看器预设,在Adobe Experience Manager中添加、编辑、删除、发布、取消发布和预览查看器预设。
默认情况下,当您在资产的详细信息视图中选择查看器时,系统会显示15个查看器预设。 您可以提高此限制。请参阅增加显示的查看器预设数量。
不同的网页有不同的需求。 例如,有时您希望网页提供一个链接,以在单独的浏览器窗口中打开HTML5查看器。 在其他情况下,可能需要直接将HTML5查看器嵌入到托管页面。 在后一种情况下,网页可以具有静态布局。 或者,它可能是“响应式”的,并在不同设备上或针对不同浏览器窗口大小以不同方式显示。 为了满足这些需求,Dynamic Media附带的所有预定义现成HTML5查看器都支持静态网页和响应式设计的网页。
有关如何将响应式查看器嵌入网页的更多信息,请参阅响应式图像库。
请注意,在首次使用所有现成查看器之前,必须先发布这些查看器。
请参阅[发布查看器预设]。(#publishing-viewer-presets)
Dynamic Media附带的所有现成查看器预设都与以下系统完全兼容:
管理员在创建查看器预设时,可以添加和自定义以下富媒体类型。
轮播集 |
热点或图像映射,或两者都添加到两个或更多图像的系列中。 客户可以向左或向右平移图像,然后在图像上选择一个热点以获取更多详细信息,或直接从网站的类别、主页或登陆页面进行购买。 |
尺寸 |
显示可让您转动、平移、缩放或重新进入相机的3D场景。 |
弹出缩放 | 在原始图像旁边显示缩放区域的副本图像。没有可用的控件 - 用户在要查看的区域上方移动选择。 在决定此查看器的整体带宽使用率时,请考虑到主图像和弹出图像都在查看器中呈现。主图像的大小(暂存宽度和暂存高度)和缩放因子决定弹出图像的大小。为避免弹出图像过大,请平衡这两个值:如果主图像较大,请减小缩放因子的值。(弹出宽度和弹出高度决定弹出窗口的大小,但它们不决定在查看器中呈现的弹出图像的大小。) 例如,如果主图像的大小是 350 X 350 像素,缩放因子为 3,则生成的弹出图像的大小就是 1050 X 1050 像素。如果主图像的大小是 300 X 300 像素,缩放因子为 4,则弹出图像的大小就是 1200 X 1200 像素。根据 JPEG 质量设置(建议的设置在 80 到 90 之间),您可以显著减小文件的大小。建议的缩放因子为 2.5 到 4,具体视主图像的大小而定。 |
内联缩放 | 在原始查看器中显示缩放区域的图像。 没有可使用的控件。 也就是说,用户会在要查看的区域上移动所做的选择。 |
图像集 | 在图像集查看器中,用户可以通过选择缩略图来查看项目的不同视图或颜色变化。 此查看器还提供了用于仔细检查图像的缩放工具。 |
交互式图像 | 热点会添加到图像的某些部分,客户随后可以选择这些部分以获取更多详细信息,或直接从网站的类别、主页或登陆页面购买。 |
交互式视频 | 缩略图会添加到视频中的时间轴区段,客户随后可以选择该区段以获取更多详细信息,或直接从网站的类别、主页或登陆页面购买。 |
混合媒体 | 在一个查看器中显示不同类型的媒体。您可以包含旋转集、图像集、图像和视频。 |
全景图像 | 全景图像和全景VR查看器可渲染球面全景图像,以让用户沉浸在房间、属性、位置或景观的360°观看体验中。 要使上传的图像符合球面全景图的条件,该图像必须具有以下任一项或两项:
纵横比和关键字条件都适用于资产详细信息页面和“全景媒体”WCM组件的全景资产。 重要信息:此查看器仅在Dynamic Media - Scene7模式下可用。 |
智能裁剪视频 |
使用此查看器可自动检测任何视频中的焦点并将其裁剪到该焦点。 |
旋转集 | 提供图像的不同视图,以便用户可以旋转对象来从不同的侧边和角度进行检查。 |
360视频 | 使用360/VR视频查看器可渲染等长形视频,以体验房间、属性、位置、景观或医疗程序的沉浸式观看体验。 在平面显示器上播放时,用户可以控制观看角度;移动设备上的播放通常应用其内置的陀螺仪控件。 查看器包含对交付360个视频资产的本机支持。 默认情况下,查看或播放不需要任何其他配置。 您使用标准视频扩展名(如.mp4、.mkv和.mov)交付360视频。 最常见的编解码器是H.264。 重要信息:此查看器仅在Dynamic Media - Scene7模式下可用。 |
视频 | 使用渐进式比特率流或自适应比特率流播放视频。 自适应比特率流自动执行设备和带宽检测,以正确的格式提供正确质量的视频。 |
垂直缩放 | 通过垂直缩放查看器,您可以最大化产品图像查看体验,从而为用户提供产品的最佳呈现方式。 色板的垂直位置可执行以下操作:
|
缩放 | 允许用户通过选择区域来放大该区域。 用户可以选择用于放大、缩小图像以及将图像重置为默认大小的控件。 |
下表标识了Dynamic Media附带的所有预定义现成查看器预设。
另请参阅实时演示。
有关查看器支持的Web浏览器和操作系统版本的信息,您可以查看查看器发行说明。
请参阅查看器参考指南目录中的“查看器发行说明”。
Dynamic Media中所有现成的查看器预设均已激活(开启),但您必须发布它们。
请参阅发布查看器预设。
您创建和添加的任何新查看器预设都必须同时激活和已发布。
请参阅激活或取消激活查看器预设和发布查看器预设。
查看器预设标题 | 类型 | CSS 文件名称 |
轮播_点线_深色 | 轮播(_S) | html5_carouselviewer_dotted_dark.css |
轮播_虚线_光 | 轮播(_S) | html5_carouselviewer_dotted_light.css |
轮播_数值_深色 | 轮播(_S) | html5_carouselviewer_numeric_dark.css |
轮播_数值_光 | 轮播(_S) | html5_carouselviewer_numeric_light.css |
尺寸 | 尺寸 | html5_dimensionalviewer.css |
弹出 | Flyout_Zoom | html5_flyoutviewer.css |
ImageSet_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 |
全景图像 | 全景图像(_I) | html5_panoramicimage.css |
全景图像VR | 全景图像(_I) | html5_panoramicimage.css |
Shoppable_Banner | Interactive_Image | html5_interactiveimage.css |
Shoppable_Video_dark | Interactive_Video | html5_interactivevideoviewer_dark.css |
Shoppable_Video_light | Interactive_Video | html5_interactivevideovewer_light.css |
SmartCropVideo | Smart_Crop_Video | html5_smartcropvideoviewer.css |
SmartCropVideo_social | Smart_Crop_Video | html5_smartcropvideoviewersocial.css |
SpinSet_dark | 旋转集 | 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 |
垂直缩放 | html5_zoomverticalviewer_dark.css |
ZoomVertical_light | 垂直缩放 | html5_zoomverticalviewer_light.css |
下表标识了iOS、Android™ 2.x和Android™ 3.x设备上支持的移动查看器手势。
手势 | 弹出缩放 | 缩放 | 旋转 |
拖动 |
平移 |
平移 |
平移 |
选择 |
显示弹出窗口 |
显示或隐藏用户界面 |
显示或隐藏用户界面 |
双击 |
不适用 |
放大或重置 |
放大或重置 |
捏开 |
不适用 |
放大(仅限iOS和Android™ 3x) |
放大(仅限iOS和Android™ 3x) |
捏合关闭 |
不适用 |
缩小(仅限iOS和Android™ 3x) |
缩小(仅限iOS和Android™ 3x) |
轻扫 |
滚动色板条 |
滚动图像 |
旋转 |
弗里克 |
滚动色板条 |
滚动图像 |
旋转 |
当从详细信息视图 > 查看器查看资产时,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]}
选择全部保存。
通过创建查看器预设,您可以应用各种设置来查看资产并与之交互。 但是,您不需要创建查看器预设。 如果您愿意,可以使用AEM Assets附带的默认现成查看器预设。
如果选择创建查看器预设,则在保存该查看器预设后,查看器的状态将在“查看器预设”页面中自动激活(设置为On)。 此状态表示无论您何时预览图像或视频,都可以在Dynamic Media组件和交互式媒体组件中看到该图像或视频。
某些查看器预设具有可影响查看器的使用和整体行为的排他设置。 根据您创建的查看器预设,您可能需要注意这些特殊注意事项。
要创建查看器预设,请执行以下操作:
在Experience Manager的左上角,选择Experience Manager徽标,然后在左边栏中,选择工具(锤子图标)> 资产 > 查看器预设。
在“查看器预设”页面的工具栏中,选择创建。
在新查看器预设对话框的预设名称字段中,输入新预设的名称。请仔细选择名称 — 在您选择创建后,这些名称将不可编辑。
在稍后的这些步骤中保存预设时,“查看器预设”页面的“预设标题”列标题下会显示该名称。
在“富媒体类型”下拉菜单中,选择要创建的查看器预设类型,然后在页面的右上角,选择创建。
请参阅查看器预设的富媒体类型。
在“查看器预设编辑器”页面上,选择外观选项卡。
执行下列操作之一:
在选定类型下拉菜单中,选择要自定义其可视设计的组件。 或者,您也可以选择查看器中的任何可视化元素,以选择进行配置。
通过可视编辑器,您可以查看特定属性对样式有何影响。 设置或调整任何属性,以便使用编辑器左侧的示例即时查看该属性对查看器有何影响。
查看器参考指南中的“自定义<viewer name>
查看器”帮助主题中介绍了每种类型查看器预设的CSS样式属性。 例如,如果要创建类型为Mixed_Media
的查看器预设,请参阅自定义混合媒体查看器 ,以获取每个属性的列表和说明。
如果您在单独的CSS文件中定义了样式设置,则可以将CSS文件上传到AEM Assets。 选择在选定类型下拉菜单下方的导入CSS(如有必要,向上滚动可视编辑器以查看它),以便您能够找到上传的CSS文件并将其与查看器预设关联。
导入CSS文件时,可视编辑器会检查CSS是否使用正确的查看器标记。 例如,如果要创建缩放查看器,则必须使用在父查看器元素上定义的查看器类名称.s7mixedmediaviewer
定义所有导入的CSS规则。
只要为给定查看器正确定义CSS标记,就可以导入任意手工CSS。 (CSS标记在查看器参考指南中的任何“自定义<查看器名称>查看器”帮助主题中进行了描述。 例如,如果要阅读有关缩放查看器的CSS标记,请参阅自定义缩放查看器。) 但是,可视编辑器可能无法理解某些CSS值。 在这种情况下,可视编辑器会尝试覆盖错误,以便CSS仍然可以工作。
如果您希望直接在其原始表单中编辑CSS,请选择“选定类型”下拉菜单下方的显示/隐藏CSS(如有必要,请向上滚动可视编辑器以查看)。
与可视编辑器一样,当您直接在CSS中更改属性时,您会立即看到该属性对查看器示例有何影响。 而且,该同一属性会在可视化编辑器中同时自动更新。 因此,您可以使用原始CSS编辑器或可视编辑器,或者两者交替使用。
对于按钮图稿,选择2x图像并上传高分辨率艺术品。 使用交互式图像和购物横幅时,您还可以从各种现成的热点按钮中进行选择。
(可选)在“编辑查看器预设”页面顶部附近,选择Desktop、Tablet或Phone,为不同设备和屏幕类型唯一定义可视样式。
在“查看器预设编辑器”页面上,选择Behavior选项卡。 或者,您也可以选择查看器中的任何可视化元素,以选择进行配置。
从选定类型下拉菜单中,选择要更改其行为的组件。
可视化编辑器中的许多组件都有与其关联的详细说明。 当您展开组件以显示其关联参数时,这些描述会显示在蓝色框中。
有些“查看器类型”具有的组件允许您在 IS 命令文本字段中指定“图像提供”命令。有关可使用的命令列表,请参阅图像提供 API 参考。
如果您使用的是触控设备,如手机或平板电脑……
在文本字段中键入值后,请在用户界面的其他位置选择以提交更改并关闭虚拟键盘。 如果选择Enter,则不会执行任何操作。
在页面的右上角附近,选择Save。
发布新查看器预设,以便在您的网站上使用。
请参阅发布查看器预设。
关于面板中图像缩略图的显示模式
创建或编辑交互式视频查看器预设时,可以选择在从Behavior选项卡下的选定组件菜单中选择InteractiveSwatches
时要使用的显示模式设置。 您选择的显示模式会影响视频播放时缩略图的显示方式和显示时间。 您可以选择segment
显示模式(默认)或continuous
显示模式。
显示模式 | 描述 |
区段 |
在此模式下,当分配给视频区段的缩略图数量少于显示面板中的可见点数时。 此外,下一个或上一个子区段的缩略图不是提取到,以填充面板中的任何空白点。 即,它保留分配给特定视频区段的色板的显示。 |
连续 | 在 |
关于交互式视频查看器中的自动滚动行为
交互式视频查看器中缩略图的自动滚动行为与您选择的显示模式无关。
创建或编辑交互式视频查看器预设时,您可以从“行为”选项卡访问“自动滚动”。在“行为”选项卡的选定的组件下拉菜单中,选择InteractiveSwatches。 “自动滚动”复选框列在“IS 命令”文本字段的下方。
如果在查看器预设中禁用自动滚动(清除复选框),则在用户播放视频时,该面板仅显示整个视频长度的第一个缩略图。但是,如果需要,用户可以使用向上和向下箭头图标手动滚动缩略图。
在查看器预设中启用(选择)自动滚动后,在视频播放过程中,分配给视频区段的缩略图图像会在区段开始时滚动到视图中。但是,在某些情况下,区段内某些缩略图的显示时间是其之前或之后缩略图显示时间的两倍。发生此行为的原因是区段中缩略图的数量大于面板中可见缩略图的数量,且不可平均分割。
为了说明这一点,假设您有一个30秒的视频区段。 此外,30秒内共显示9个缩略图。 您的浏览器的大小调整为显示面板中有四个可见的缩略图位置。 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组件、交互式媒体组件以及您查看资产时均可见。
但是,要传送带有查看器预设的资产,还必须发布查看器预设。 必须激活和并发布所有查看器预设,才能获取资产的URL或嵌入代码。 确保激活并发布Dynamic Media附带的所有现成查看器预设。 您创建和添加的自定义查看器预设将自动激活,但也必须发布。
请参阅激活或取消激活查看器预设。
另请参阅预览资产。
要发布查看器预设,请执行以下操作:
不支持编辑任何预定义的现成查看器预设。如果您编辑现成的查看器预设,系统会提示您使用新名称保存该查看器预设。
要编辑查看器预设,请执行以下操作:
在Experience Manager的左上角,选择Experience Manager徽标,然后在左边栏中,选择工具(锤子图标)> 资产 > 查看器预设。
选中查看器预设标题左侧的框以选择预设。
在工具栏中,选择编辑。
在查看器预设编辑器页面上,使用外观和行为选项卡上的选项对查看器预设进行所需的更改。
从“查看器预设编辑器”页面左上角附近的外观选项卡中,选择Desktop、Tablet或Phone以更改资产的显示模式。
在页面的右上角附近,执行下列操作之一:
您可以删除已创建并添加到Dynamic Media的查看器预设。
要删除自定义查看器预设,请执行以下操作:
如果已发布资产和选定的查看器,则在选择查看器预设后 将显示 “ URL ”和“嵌入”按钮。
要将查看器预设应用到资产,请执行以下操作:
打开资产,在页面的左上角附近,选择下拉菜单,然后选择查看器。
如果已发布资产和选定的查看器,则在选择查看器预设后 将显示 “ URL ”和“嵌入”按钮。
从左窗格中选择一个查看器预设,以便将其应用到资产。
您可以复制URL以与其他用户共享。
要获取查看器预设的 URL,请参阅将 URL 关联到您的 Web 应用程序。另请参阅将视频查看器嵌入网页。
如果您使用Experience Manager作为WCM,则可以直接在页面上使用查看器预设添加资产。 请参阅将Dynamic Media Assets添加到页面。