将 Dynamic Media 资源添加到页面

要将Dynamic Media功能添加到您在网站上使用的资产中,您可以直接在页面上添加 Dynamic MediaInteractive MediaMedia​或 ​Video 360 Media全景组件。 您可以通过进入布局模式并启用Dynamic Media组件来添加组件。 然后,您可以将这些组件添加到页面,并将资产添加到该组件。 Dynamic media组件是智能的——它们知道您添加的是图像还是视频,可用的配置选项会相应地发生更改。

如果您使用Dynamic Media作为WCM,则可以直接将Adobe Experience Manager资源添加到页面。 如果您为WCM使用第三方,请执行以下任一操作 链接嵌入 您的资产。 有关响应式第三方网站,请参阅将优化的图像交付到响应式网站

注意

在将资源添加到Experience Manager中的页面之前,请务必先发布资源。 参见 发布Dynamic Media资源.

将Dynamic Media组件添加到页面

向页面添加3D媒体、Dynamic Media、Interactive Media、全景媒体、智能裁剪视频或Video 360媒体组件与向任何页面添加组件相同。 以下部分介绍了Dynamic Media组件。

要将Dynamic Media组件添加到页面,请执行以下操作:

  1. 在Experience Manager中,打开要添加Dynamic Media组件的页面。

  2. 在页面左侧的面板中(如有必要,切换侧面板的显示),选择 组件 图标。

  3. 组件 标题,在下拉列表中,选择 Dynamic Media.

    如果没有可用的Dynamic Media组件列表,则必须启用要使用的Dynamic Media组件。 参见 启用Dynamic Media组件.

    6_5_360video_wcmcomponent

  4. 拖动 Dynamic Media 要使用的组件,并将其放到页面上的所需位置。

  5. 将鼠标指针直接悬停在组件上。 当组件被蓝色框包围时,选择一次以显示组件的工具栏。 选择 配置(扳手) 图标。

    6_5_360video_wcmcomponentconfigure

  6. 根据您拖放到页面上的Dynamic Media组件,将会打开一个配置对话框。 设置组件的选项 视需要而定。

    以下示例显示了Dynamic Media Video 360媒体 组件对话框以及查看器预设下拉列表中可用的选项。

    视频360媒体组件

    Dynamic Media视频360媒体组件。

  7. 完成后,在对话框的右上角,选中复选标记以保存更改。

启用Dynamic Media组件

如果没有可添加到页面的Dynamic Media组件,则可能意味着您必须首先启用要使用的组件。

要启用Dynamic Media组件,请执行以下操作:

  1. 在Experience Manager中,打开要添加Dynamic Media组件的页面。

  2. 在靠近页面顶部的工具栏的左侧,选择“页面信息”图标,然后选择 编辑模板 下拉列表中。

    edit-template

  3. 在靠近页面顶部的工具栏右侧,从下拉列表中选择 结构.

    策略

  4. 在页面底部附近,选择 布局容器 要打开其工具栏,请选择策略图标。

  5. 布局容器 页面,在 属性 标题,确保 允许的组件 选项卡处于选中状态。

    允许的组件

  6. 滚动直到您看到 Dynamic Media.

  7. 选择左侧的>图标 Dynamic Media 因此,您可以展开列表,然后选择要启用的Dynamic Media组件。

    Dynamic Media组件列表

  8. 在右上角附近 布局容器 页面上,选择完成(复选标记)图标。

  9. 在靠近页面顶部的工具栏右侧,从下拉列表中选择 初始内容,则 将Dynamic Media组件添加到页面 和往常一样。

本地化Dynamic Media组件

您可以通过以下两种方式之一来本地化Dynamic Media组件:

  • 在“站点”的网页中,打开“属 ”,然后选择“ 高级 ”选项卡。 选择所需的本地化语言。

    chlimage_1-172

  • 从站点选择器中,选择所需的页面或页面组。 选择 属性 并选择 高级 选项卡。 选择所需的本地化语言。

    注意

    请注意,并非所有语言都可在 语言 当前已为菜单分配令牌。

Dynamic Media 组件

Dynamic Media当您选择 组件 图标,然后筛选 Dynamic Media.

可用的Dynamic Media组件包括:

  • Dynamic Media - 用于图像、视频、电子目录和旋转集等资产。
  • 交互式媒体 — 用于任何交互式资产,例如交互式视频、交互式图像或轮播集。
  • 全景媒体 — 用于全景图像或VR全景图像资产。
  • Video 360媒体 — 用于360视频和360 VR视频资产。
注意

默认情况下,这些组件不可用;在使用它们之前,必须通过模板编辑器使其可用。 在它们可用后,i在模板编辑器中,您可以像添加任何其他Experience Manager组件一样将这些组件添加到页面。

6_5_dynamicmediawcmcomponents

Dynamic Media 组件

Dynamic Media组件是智能的。无论您是添加图像还是视频,都有各种不同的选项。 该组件支持图像预设、基于图像的查看器(例如图像集、旋转集、混合媒体集)和视频。此外,查看器可响应 — 屏幕大小根据屏幕大小自动更改。 所有查看器都是 HTML5 查看器。

注意

如果您的网页具有以下内容:

  • 正在同一页面上使用的多个Dynamic Media组件实例。
  • 每个实例使用相同的资源类型。

不支持为该页面上的每个Dynamic Media组件分配不同的查看器预设。

但是,您可以对页面内使用相同类型资产的所有Dynamic Media组件使用相同的查看器预设。

添加 Dynamic Media 组件时,如果 Dynamic Media 设置​为空或无法正常添加资产,请检查以下各项:

  • 您已经启用了 Dynamic Media。默认情况下,Dynamic Media 处于禁用状态。
  • 图像具有金字塔 TIFF 文件。在启用Dynamic Media之前导入的图像没有金字塔tiff文件。

处理图像时

Dynamic Media 组件允许您添加动态图像,包括图像集、旋转集和混合媒体集。您可以缩放图像,并在适当的情况下在旋转集内旋转图像,或从其他类型的集合中选择图像。

您还可以直接在组件中配置查看器预设、图像预设或图像格式。要使图像具有响应性,您可以设置断点或应用响应式图像预设。

Dynamic Media通过选择 编辑 图标,然后 Dynamic Media设置.

dm-settings-image-preset

注意

默认情况下,Dynamic media图像组件是自适应的。 如果要使其变为固定大小,请在“高级”选项卡的组件中设置 ,并使用“宽度”和“高 ​度”

  • 查看器预设 — 从下拉菜单中选择现有的查看器预设。 如果您要查找的查看器预设不可见,则必须使其可见。 参见 管理查看器预设. 如果您使用的是图像预设,则无法选择查看器预设,反之亦然。

    只有当您查看图像集、旋转集或混合媒体集时,此选项才可用。 显示的查看器预设是智能的 — 只显示相关的查看器预设。

  • 查看器修饰符 — 查看器修饰符采用名称=值对与&分隔符的形式,可让您按照《查看器参考指南》中的概述更改查看器。 例如,查看器修饰符为 posterimage=img.jpg&caption=text.vtt,1 为视频缩略图设置不同的图像,并将隐藏式字幕/字幕文件与视频关联。

  • 图像预设 — 从下拉菜单中选择现有的图像预设。 如果您要查找的图像预设不可见,则必须使其可见。 请参阅管理图像预设。如果您使用的是图像预设,则无法选择查看器预设,反之亦然。

    如果您查看的是图像集、旋转集或混合媒体集,则此选项不可用。

  • 图像修饰符 — 通过提供其他图像命令可应用图像效果。 这些效果在图像预设和图像服务命令参考中进行了描述。

    如果您查看的是图像集、旋转集或混合媒体集,则此选项不可用。

  • 断点 — 如果您在响应式网站上使用此资产,则必须添加图像断点。 图像断点由逗号(,)分隔。 当图像预设中未定义高度或宽度时,可以使用此选项。

    如果您查看的是图像集、旋转集或混合媒体集,则此选项不可用。

    您可以通过选择来编辑以下高级设置 编辑 在组件中。

  • 针对更高分辨率设备进行优化 — 选中(默认)复选框以允许DPR(设备像素比率)优化。

    针对更高分辨率设备进行优化 选项仅在以下情况为真时显示:

    • 在“预设类型”下, 图像预设 已选中,并且 RESS_IP 已从中选定 图像预设 下拉列表。

    用于图像预设的设备像素比设置

    另请参阅 关于设备像素比优化. 任何Adobe Experience Manager Dynamic Media智能成像DPR值都将被忽略。

  • 标题 — 更改图像的标题。

  • 替换文字 — 为已关闭图形的用户在图像中添加标题。

    如果您查看的是图像集、旋转集或混合媒体集,则此选项不可用。

  • URL,打开方式 — 您可以设置资产以打开链接。 设置 URL,并在打开方式中指示是要在同一窗口中还是在新窗口中打开该 URL。

    如果您查看的是图像集、旋转集或混合媒体集,则此选项不可用。

  • 宽度 — 如果希望图像为固定大小,请输入以像素为单位的值。 将此值保留为空可使资源具有自适应性。

  • 高度 — 如果希望图像为固定大小,请输入以像素为单位的值。 将此值保留为空可使资源具有自适应性。

处理视频时

使用Dynamic Media组件向网页添加动态视频。 编辑组件时,您可以选择使用预定义的视频查看器预设来播放页面上的视频。

chlimage_1-173

通过选择编辑以下Dynamic Media设置 编辑 在组件中。

注意

默认情况下,Dynamic Media 视频组件为自适应组件。如果要使其变为固定大小,请在组件中设置它,并使用 宽度高度高级 选项卡。

使用智能裁剪时

使用Dynamic Media组件将智能裁剪图像资源添加到网页。 编辑组件时,您可以选择使用预定义的视频查看器预设来播放页面上的视频。

另请参阅 图像配置文件.

dm-settings-smart-crop

通过选择编辑以下Dynamic Media设置 编辑 在组件中。

注意

默认情况下,Dynamic media图像组件是自适应的。 如果要使其变为固定大小,请在“高级”选项卡的组件中设置 ,并使用“宽度”和“高 ​度”

  • 图像修饰符 — 通过提供其他图像命令可应用图像效果。 这些效果在图像预设和图像服务命令参考中进行了描述。

    如果您查看的是图像集、旋转集或混合媒体集,则此选项不可用。

    您可以通过选择来编辑以下高级设置 编辑 在组件中。

  • 启用宽高比匹配 — 要让Dynamic Media选取一个宽高比最符合原始图像宽高比的智能裁剪演绎版,请选择此选项。

  • 针对更高分辨率设备进行优化 — 选中(默认)复选框以允许DPR(设备像素比率)优化。

    针对更高分辨率设备进行优化 选项仅在以下情况为真时显示:

    • 在“预设类型”下, 智能裁剪 选项。

    用于智能裁切的设备像素比设置

    另请参阅 关于设备像素比优化. 任何Adobe Experience Manager Dynamic Media智能成像DPR值都将被忽略。

  • 标题 — 更改智能裁剪图像的标题。

  • 替换文字 — 为已关闭图形的用户在智能裁剪图像中添加标题。

    如果您查看的是图像集、旋转集或混合媒体集,则此选项不可用。

  • URL,打开方式 — 您可以设置资产以打开链接。 设置 URL,并在打开方式中指示是要在同一窗口中还是在新窗口中打开该 URL。

    如果您查看的是图像集、旋转集或混合媒体集,则此选项不可用。

  • 宽度 — 如果希望图像为固定大小,请输入以像素为单位的值。 将此值保留为空可使资源具有自适应性。

  • 高度 — 如果希望图像为固定大小,请输入以像素为单位的值。 将此值保留为空可使资源具有自适应性。

交互式媒体组件

交互式媒体组件适用于具有交互功能的资产,例如热点或图像映射。如果您具有交互式图像、交互式视频或传送横幅,请使用​交互式媒体​组件。

交互式媒体组件是智能的。无论您是添加图像还是视频,都有各种不同的选项。 此外,查看器可响应 — 屏幕大小根据屏幕大小自动更改。 所有查看器都是 HTML5 查看器。

注意

如果您的网页具有以下内容:

  • 正在同一页面上使用的交互式媒体组件的多个实例。
  • 每个实例使用相同的资源类型。

不支持为该页面上的每个交互式媒体组件分配不同的查看器预设。

但是,您可以为页面内使用相同类型资产的所有交互式媒体组件使用相同的查看器预设。

chlimage_1-174

您可以编辑以下内容 常规 通过选择 编辑 在组件中。

  • 查看器预设 — 从下拉菜单中选择现有的查看器预设。 如果您要查找的查看器预设不可见,则必须使其可见。 查看器预设必须先发布,然后才能使用。请参阅管理查看器预设。

  • 标题 — 更改视频的标题。

  • 宽度 — 如果希望图像为固定大小,请输入以像素为单位的值。 将此值保留为空可使资源具有自适应性。

  • 高度 — 如果希望图像为固定大小,请输入以像素为单位的值。 将此值保留为空可使资源具有自适应性。

    您可以编辑以下内容 添加到购物车 通过选择 编辑 在组件中。

  • 显示产品资产 — 默认情况下,此值处于选中状态。 产品资产会按“商务”模块中的定义显示产品的图像。清除复选标记不会显示产品资产。

  • 显示产品价格 — 默认情况下,此值处于选中状态。 产品价格会按“商务”模块中的定义显示项目的价格。清除复选标记不会显示产品价格。

  • 显示产品表单 — 默认情况下,不选中此值。 产品表单包含所有产品变量,例如大小和颜色。清除复选标记不会显示产品变量。

全景媒体组件

全景媒体组件适用于那些是球面全景图像的资源。 此类图像可提供360°的房间、财产、位置或景观观赏体验。 要使图像符合球面全景图的条件,该图像必须满足以下一项或两项条件:

  • 长宽比为2:1。
  • 已用关键字标记 equirectangular 或(spherical + panorama)或(spherical + panoramic)。 参见 使用标记.

纵横比和关键字条件都适用于资产详细信息页面和​全景媒体 WCM 组件的全景资产。

注意

如果您的网页具有以下内容:

  • 的多个实例 全景媒体 正在同一页面上使用的组件。
  • 每个实例使用相同的资源类型。

为每个查看器分配不同的查看器预设 全景媒体 该页面上的组件不受支持。

但是,您可以为页面内使用相同类型资产的所有全景媒体组件使用相同的查看器预设。

panoramic-media-viewer-preset

您可以通过选择来编辑以下设置 配置 在组件中。

  • 查看器预设 — 从“查看器预设”下拉菜单中选择现有查看器。

如果您要查找的查看器预设不可见,请检查以确保其已发布。 在使用查看器预设之前发布这些预设。 请参阅管理查看器预设

视频360媒体组件

使用 Video 360媒体 可在您的网页上渲染等长方形视频的组件,以获得房间、财产、位置、景观或医疗程序的沉浸式观看体验。

在平面显示器上播放期间,用户可控制视角;在移动设备上播放通常使用其内置的陀螺仪控件。

查看器包括对360个视频资产交付的本机支持。 默认情况下,查看或播放无需其他配置。 您可使用标准视频扩展名(如.mp4、.mkv和.mov)来交付360视频。 最常见的编解码器是H.264。

6_5_360video_wcmcomponent-1

您可以通过选择来编辑以下设置 配置 在组件中。

  • 查看器预设 — 从“查看器预设”下拉菜单中选择现有查看器。 对于使用虚拟现实眼镜的最终用户,请使用Video360VR。 包括基本视频播放控件和社交媒体功能。 使用包含基本视频播放控件的Video360_social。 视频渲染在立体声模式下完成。 手动视点控制已关闭,但陀螺控制已打开。 没有社交媒体功能。

如果您要查找的查看器预设不可见,请检查以确保其已发布。 请确保先发布查看器预设,然后再使用它们。 请参阅管理查看器预设

使用HTTP/2投放Dynamic Media资源

HTTP/2是新的、更新的Web协议,它改进了浏览器和服务器的通信方式。 它提供了更快的信息传输并减少了所需的处理能力。 Dynamic Media资源的交付现在可以通过HTTP/2进行,从而提供更好的响应和加载时间。

参见 HTTP2内容交付 ,以了解有关开始将HTTP/2用于Dynamic Media帐户的完整详细信息。

在此页面上