管理查看器预设

查看器预设是一组设置，用于确定用户如何在其计算机屏幕和移动设备上视图富媒体资产。如果您是管理员，则可以创建查看器预设。可对一组查看器配置选项进行设置。例如，可更改查看器显示大小或缩放行为。

有关创建和自定义您自己的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查看器参考指南》。

本节介绍如何创建、编辑和管理查看器预设。 无论您何时对资产进行预览，您都可以将查看器预设应用到资产。 请参阅应用查看器预设。

查看器的键盘辅助功能

所有现成查看器都支持键盘辅助功能。

另请参阅键盘辅助功能和导航。

管理查看器预设

您可以通过点按​工具（锤子图标）>资产>查看器预设，在AEM中添加、编辑、删除、发布、取消发布和预览查看器预设。

对响应式设计网页的查看器支持

不同的网页有不同的需求。 例如，有时您希望网页提供链接，在单独的浏览器窗口中打开HTML5查看器。 在其他情况下，可能需要将HTML5查看器直接嵌入到托管页面。 在后一种情况下，网页可能具有静态布局。 或者，它可能是“响应式”的，并在不同设备或不同浏览器窗口大小下以不同方式显示。 为了满足这些需求，Dynamic Media附带的所有预定义现成HTML5查看器都支持静态网页和响应式设计网页。

有关如何将响应式查看器嵌入到网页上的更多信息，请参阅中的响应式图像库。

查看器预设系统兼容性

Dynamic Media附带的所有现成查看器预设都与以下系统完全兼容：

• 台式机
• Apple iPhone
• Apple iPad
• Android智能手机
• Android平板电脑
• 对于视频，为Blackberry和Windows Phone提供了对MP4播放的额外支持。

查看器预设的富媒体类型

管理员在创建新查看器预设时可以添加和自定义以下富媒体类型。

轮播集	热点或图像映射，或者两者都添加到一系列两个或多个图像中。 客户可以向左或向右平移图像，然后单击图像上的热点以获取更多详细信息，或直接从网站的类别、主页或登陆页购买。
尺寸	显示3D场景，您可以旋转、平移、缩放或重新进入相机。
弹出缩放	在原始图像旁边显示缩放区域的副本图像。没有可用的控件 - 用户在要查看的区域上方移动选择。 在决定此查看器的整体带宽使用率时，请考虑到主图像和弹出图像都在查看器中呈现。主图像的大小（暂存宽度和暂存高度）和缩放因子决定弹出图像的大小。为避免弹出图像过大，请平衡这两个值：如果主图像较大，请减小缩放因子的值。（弹出宽度和弹出高度决定弹出窗口的大小，但它们不决定在查看器中呈现的弹出图像的大小。） 例如，如果主图像的大小是 350 X 350 像素，缩放因子为 3，则生成的弹出图像的大小就是 1050 X 1050 像素。如果主图像的大小是 300 X 300 像素，缩放因子为 4，则弹出图像的大小就是 1200 X 1200 像素。根据 JPEG 质量设置（建议的设置在 80 到 90 之间），您可以显著减小文件的大小。建议的缩放因子为 2.5 到 4，具体视主图像的大小而定。
内联缩放	在原始查看器中显示缩放区域的图像。 没有可使用的控件。 即，用户将选定内容移动到要视图的区域上。
图像集	在“图像集”查看器中，用户可以通过单击缩略图，查看项目的不同视图或颜色变量。此查看器还提供了用于仔细检查图像的缩放工具。
交互式图像	热点会添加到图像的某些部分，然后客户可以单击这些部分以获取更多详细信息，或直接从网站的类别、主页或登陆页购买。
交互式视频	缩略图会添加到视频中的时间轴区段，然后客户可以单击该区段以获取更多详细信息，或直接从网站的类别、主页或登陆页购买。
混合媒体	在一个查看器中显示不同类型的媒体。您可以包含旋转集、图像集、图像和视频。
全景图像	全景图像和全景VR查看器渲染球面全景图像，让用户沉浸在房间、房产、位置或风景的360°观看体验中。 要使上传的图像符合球面全景图的要求，它必须具有以下任一或两者： 宽高比为2:1。 使用关键字equirectangular、spherical和panorama、spherical 和panoramic进行标记。 请参阅使用标记。 长宽比和关键字条件均适用于资产详细信息页面和“全景媒体”WCM组件的全景资产。 重要说明:此查看器仅在Dynamic Media-Scene7模式下可用。
智能裁剪视频	使用此查看器可自动检测任何视频中的焦点并进行裁剪。
旋转集	提供图像的不同视图，以便用户可以旋转对象来从不同的侧边和角度进行检查。
360视频	使用360/VR视频查看器渲染等长形视频，实现房间、财产、位置、景观或医疗过程的沉浸式观看体验。 在平面显示器上播放时，用户可以控制观看角度；在移动设备上播放通常利用其内置的陀螺仪控件。 查看器包含对360个视频资源投放的本机支持。 默认情况下，查看或回放不需要任何其他配置。 您可以使用标准视频扩展（如。mp4、.mkv和。mov）交付360视频。 最常见的编解码器是H.264。 重要说明:此查看器仅在Dynamic Media-Scene7模式下可用。
视频	使用渐进式或自适应比特率流播放视频。 自适应比特率流会自动执行设备和带宽检测，以正确的格式提供正确质量的视频。
垂直缩放	通过垂直缩放查看器，您可以最大化产品图像查看体验，为用户提供最佳的产品展示效果。 色板的垂直位置如下所示： 确保色板“高于折页”。 使用水平色板（具体取决于用户的桌面屏幕大小）时，只有用户向下滚动页面后，才能显示色板。通过将色板垂直放置在查看器中，可确保无论用户的屏幕大小如何，色板都是可见的。 最大化主图像大小。 使用水平色板时，必须在页面上保留空间，以确保它们可见。此定位缩小了主图像的大小。 但是，对于垂直色板布局，您无需分配此空间。 因此，您可以最大化主图像大小。
缩放	用户可以通过单击该选项来缩放区域。用户可以单击相应控件来放大图像、缩小图像以及将图像重置为默认大小。

列表现成查看器预设

下表列出了Dynamic Media附带的所有预定义现成查看器预设。

另请参阅实时演示。

有关查看器支持的Web浏览器和操作系统版本的信息，可以查看查看器发行说明。

请参阅查看器参考指南的目录中的“查看器发行说明”。

查看器预设标题	类型	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
弹出	弹出_缩放	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	弹出_缩放	html5_inlinezoomviewer.css
混合媒体_深色	混合媒体	html5_mixedmediaviewer_dark.css
MixedMedia_light	混合媒体	html5_mixedmediaviewer_light.css
PanoramicImage	全景图像	html5_panoramicimage.css
PanoramicImageVR	全景图像	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）
轻扫	滚动色板条	滚动图像	旋转
弗里克	滚动色板条	滚动图像	旋转

增加显示的查看器预设数

AEM在从​详细信息视图>查看器查看资产时显示各种查看器预设。 您可以增加或减少显示的查看器数量。

要增加显示的查看器预设数量，请执行以下操作：

1. 导航到CRXDE Lite(https://localhost:4502/crx/de)。

2. 导航到位于/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist的查看器预设列表节点

   

3. 在 limit 属性中，将默认设 置为15的Value（值）更改为所需的数字。

4. 导航到位于/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource的查看器预设数据源

   

5. 在limit属性中，将数字更改为所需的数字，例如{empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}

6. 点按​保存全部。

创建查看器预设

通过创建查看器预设，您可以将各种设置应用于视图并与资产交互。 但是，您无需创建新的查看器预设。 如果您愿意，可以使用AEM Assets附带的现成默认查看器预设。

如果选择创建新的查看器预设，则在保存该查看器预设后，查看器的状态将在“查看器预设”页面中自动激活（设置为​On）。 此状态意味着无论您何时预览图像或视频，都可以在Dynamic Media组件和交互式媒体组件中看到该状态。

某些查看器预设具有排他性设置，这些设置会影响查看器的使用和整体行为。 根据您正在创建的查看器预设，您可能需要注意这些特殊注意事项。

请参阅创建交互式查看器预设的特殊注意事项。

请参阅创建传送横幅查看器预设的特殊注意事项。

创建查看器预设

1. 在AEM的左上角，点按AEM徽标，然后在左边栏中，点按​工具（锤子图标）> 资产 > 查看器预设。

   

2. 在“查看器预设”页面的工具栏中，点按​创建。

3. 在​新查看器预设​对话框的​预设名称​字段中，输入新预设的名称。请谨慎选择名称——点按​创建后，这些名称将不可编辑。

   稍后在这些步骤中保存预设时，该名称会显示在“查看器预设”页面的“预设标题”列标题下。

4. 在富媒体类型下拉菜单中，选择要创建的查看器预设类型，然后在页面的右上角，点按​创建。

   请参阅查看器预设的富媒体类型。

5. 在“查看器预设编辑器”页面上，点按​外观​选项卡。

6. 执行下列操作之一：

   • 在​选定类型​下拉菜单中，选择要自定义其可视设计的组件。 或者，您也可以点按或单击查看器中的任何可视元素，以选择进行配置。

     通过可视编辑器，您可以查看特定属性对样式的影响。 只需设置或调整任何属性，即可使用编辑器左侧的范例即时查看它对查看器有何影响。

     查看器参考指南中的任何“自定义​<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图像并上传高分辨率图稿。 处理交互式图像和购物横幅时，您还可以从各种现成的热点按钮中进行选择。

7. （可选）在“编辑查看器预设”页面顶部附近，点按 Desktop、 Tablet​或 Phone ，为不同设备和屏幕类型唯一定义可视样式。

8. 在“查看器预设编辑器”页面上，点按​行为​选项卡。 或者，您也可以点按或单击查看器中的任何可视元素，以选择进行配置。

9. 从​选定类型​下拉菜单中，选择要更改其行为的组件。

   可视编辑器中的许多组件都有与其关联的详细说明。 当您展开组件以显示其关联的参数时，这些说明会显示在蓝色框中。

   有些“查看器类型”具有的组件允许您在 IS 命令​文本字段中指定“图像提供”命令。有关可使用的命令列表，请参阅图像提供 API 参考。

   注意

   如果您使用触控设备，如手机或平板电脑……

   在文本字段中键入值后，点按用户界面中的其他位置，以提交所做的更改并关闭虚拟键盘。如果您点按 Enter，则不会执行任何操作。

10. 在页面的右上角附近，点按​保存。

11. 发布新查看器预设。 您必须先发布预设，然后才能在您的网站上使用预设。

    请参阅发布查看器预设。

创建交互式查看器预设的特殊注意事项

关于面板中图像缩略图的显示模式

在创建或编辑交互式视频查看器预设时，您可以选择在​行为​选项卡下的​选定组件​下拉菜单中选择InteractiveSwatches时要使用的显示模式设置。 您选择的显示模式会影响缩略图在视频播放时的显示方式和显示时间。 可以选择segment显示模式（默认）或continuous显示模式。

显示模式	描述
区段	Segment 是现成的交互式视频查看器预设Shoppable_Video_light和Shoppable_Video_dark以及您自己创建的任何交互式视频查看器预设的默认显示模式。 在此模式中，当分配给视频区段的缩略图数少于显示面板中的可见点数时，下一个或上一个子区段的缩略图不会被拉入，以填充面板中的任何空白点。 即保留分配给特定视频段的色板的显示。
连续	在continuous 显示模式中，如果区段中缩略图的数量小于面板中可见缩略图的数量，则查看器在显示最后一个缩略图时会自动显示来自下一个区段或上一个区段的缩略图。 本主题中的视频是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;查看器逻辑将其舍入为3个子段。

• 缩略图数量=舍入到下一个缩略图（缩略图数量／视频子区段数量）。
  使用上表中的示例，9个缩略图/ 3个视频子区段= 3个缩略图。

• 子区段的持续时间=视频总持续时间／视频子区段的数量。
  使用上表中的示例，30秒/ 3个视频子段=每个视频子段的10秒显示。

创建传送横幅查看器预设的特殊注意事项

创建传送横幅查看器预设时，可以按如下方式访问更改热点样式：

	描述	操作
热点图标	更改用于热点的图标	要更改热点图标图像，请在​外观​选项卡的​选定组件​中，点按​ImageMapEffect。 在“ 图标”下， ​​选择“背景”，并 ​​在“图像”字段中导航到所需的背景图像。

激活或取消激活查看器预设

用户界面中可用的查看器预设取决于哪些查看器预设在创作模式下处于活动状态。 默认情况下，查看器预设在创建后处于“开启”状态。 如果关闭预设，您将不会在创作模式下看到它。 如果预设已发布。 无论它是打开还是关闭，它都始终会被发布。 如果列表变得太笨重，或者您不希望某个查看器预设可供使用，您可能希望取消激活查看器预设。

激活或取消激活查看器预设

1. 在AEM的左上角，点按AEM徽标，然后在左边栏中，点按​工具（锤子图标）> 资产 > 查看器预设。

2. 在“查看器预设”页面的​状态​列标题下，点按切换以激活或取消激活查看器预设。

   已激活的查看器预设可在右侧的蓝色框中进行切换；停用的查看器预设可在灰色浅框内左侧显示切换。

发布查看器预设

激活（或打开“打开”）查看器预设的状态意味着查看器预设可在Dynamic Media组件、交互式媒体组件中以及每次视图资产时都可见。

但是，要传送* 包含查看器预设的资产，还必须发布查看器预设。 必须激活和*已发布所有查看器预设，才能获取资产的URL或嵌入代码。 您必须激活并发布Dynamic media附带的所有现成查看器预设。 您创建和添加的自定义查看器预设将自动激活，但也必须发布。

请参阅激活或取消激活查看器预设。

另请参阅预览资产。

要发布查看器预设，请执行以下操作：

1. 在AEM的左上角，点按AEM徽标，然后在左边栏中，点按​工具（锤子图标）> 资产 > 查看器预设。
2. 选择一个或多个要发布的查看器预设。
3. 在工具栏中，点按​发布​图标。

为查看器预设排序

1. 在AEM的左上角，点按AEM徽标，然后在左边栏中，点按​工具（锤子图标）> 资产 > 查看器预设。
2. 单击​预设标题、类型、已发布​或​状态​来按列标题进行排序。例如，单击​类型​按字母顺序或反向字母顺序对查看器预设类型进行排序。

编辑查看器预设

请注意，编辑任何预定义的现成查看器预设​都不受支持。​如果您编辑现成的查看器预设，系统会提示您用新名称保存该查看器预设。

编辑查看器预设

1. 在AEM的左上角，点按AEM徽标，然后在左边栏中，点按​工具（锤子图标）> 资产 > 查看器预设。

2. 选中查看器预设标题左侧的框，以选择预设。

3. 在工具栏中，点按​编辑。

4. 在​查看器预设编辑器​页面上，使用​外观​和​行为​选项卡上的选项对查看器预设进行所需的更改。

   在“查看器预设编辑器”页面左上角附近的​外观​选项卡中，点按​桌面、平板电脑​或​手机，以更改资产的显示模式。

5. 在页面的右上角附近，执行下列操作之一：

   • 点按​保存​以保存更改并返回“查看器预设”页面。
   • 点按​取消​以撤消您所做的任何更改并返回“查看器预设”页面。

删除自定义查看器预设

您可以删除已创建并添加到Dynamic Media的查看器预设。

删除自定义查看器预设

1. 在AEM的左上角，点按AEM徽标，然后在左边栏中，点按​工具（锤子图标）资产>查看器预设。
2. 在“查看器预设”页面上，选中预设标题，然后点按​垃圾桶​图标。
3. 点按​删除。

将查看器预设应用于资产

如果已发布资产和选定的查看器，则在选择查看器预设后 将显示 “ URL ”和“嵌入”按钮。

要将查看器预设应用到资产，请执行以下操作：

1. 打开资产，在页面左上角附近，点按下拉菜单，然后选择​查看器。

   注意

   如果已发布资产和选定的查看器，则在选择查看器预设后 将显示 “ URL ”和“嵌入”按钮。

2. 从左侧窗格中选择一个查看器预设，以将其应用到资产。

   您可以复制URL以与其他用户共享。

使用查看器预设传送资产

要获取查看器预设的 URL，请参阅将 URL 关联到您的 Web 应用程序。另请参阅将视频查看器嵌入网页。

如果您使用AEM作为WCM，则可以直接在页面上使用查看器预设添加资产。 请参阅将Dynamic Media资产添加到页面。