将 Dynamic Media 资产添加到页面

要将Dynamic Media功能添加到您在网站上使用的资产中,您可以直接在页面上添加​Dynamic Media​或​交互式媒体​组件。 要执行此操作,请进入Design模式并启用Dynamic Media组件。 然后,您可以将这些组件添加到页面,并将资产添加到该组件。 Dynamic Media和交互式媒体组件是智能的 — 它们知道您是添加图像还是添加视频,并且可用的选项会相应地更改。

如果您使用 AEM 作为 WCM,则可以直接将 Dynamic Media 资产添加到页面。

注意

传送横幅可以使用现成的图像映射功能。

将Dynamic Media组件添加到页面

将Dynamic Media或交互式媒体组件添加到页面与向任何页面添加组件相同。 以下各节详细介绍了Dynamic Media和交互式媒体组件。

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

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

  2. 如果没有Dynamic Media组件可用,请单击Sidekick中的标尺以进入​Design​模式,单击​Edit parsys,然后选择​Dynamic Media​以使Dynamic Media组件可用。

    注意

    请参阅在设计模式中配置组件,以了解更多信息。

  3. 单击Sidekick中的铅笔图标,返回至​编辑​模式。

  4. 将​Dynamic Media​或​交互式媒体​组件从Sidekick中的​其他​组拖动到页面中所需位置。

  5. 单击​编辑​以打开该组件。

  6. 🔗根据需要编辑该组件,然后单击​确定​以保存更改。

Dynamic Media 组件

Sidekick 下的 Dynamic Media和Interactive Media 可用。​对于任何交互式资产(例如交互式视频、交互式图像或传送集),请使用​交互式媒体​组件。对于所有其他Dynamic Media组件,请使用​Dynamic Media​组件。

chlimage_1-71

注意

这些组件在默认情况下不可用,需要先在设计模式中选择这些组件才能使用。在设计模式中启用这些组件后,您可以将它们添加到页面,操作过程与添加任何其他 AEM 组件相同。

Dynamic Media 组件

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

注意

添加Dynamic Media组件且​Dynamic Media设置​为空或无法正确添加资产时,请检查以下内容:

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

处理图像时

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

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

chlimage_1-72

可以编辑以下Dynamic Media设置,方法是单击组件中的​编辑,然后单击​Dynamic Media设置​选项卡。

chlimage_1-73

注意

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

查看器预设 — 从下拉菜单中选择现有的查看器预设。如果未显示您要查找的查看器预设,则可能需要将其显示出来。请参阅管理查看器预设。如果您正在使用图像预设,则无法选择查看器预设,反之亦然。

如果您查看的是图像集、旋转集或混合媒体集,这是唯一可用的选项。显示的查看器预设也是智能的 — 仅显示相关的查看器预设。

图像预设 — 从下拉菜单中选择现有的图像预设。如果未显示您要查找的图像预设,则可能需要将其显示出来。请参阅管理图像预设。如果您正在使用图像预设,则无法选择查看器预设,反之亦然。

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

图像修饰符 — 您可以通过提供其他图像命令来更改图像效果。有关这些内容,请参见管理图像预设命令参考

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

断点 — 如果您在响应式网站上使用此资产,则需要添加页面断点。图像断点之间需要使用逗号 (,) 进行分隔。当图像预设中未定义高度或宽度时,可以使用此选项。

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

单击组件中的​编辑​可编辑以下高级设置。

标题 — 更改图像的标题。

替换文本 — 为关闭了图形的用户添加图像标题。

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

URL, Open in — 您可以设置资产以打开链接。设置​URL​和​​中打开,以指示您希望在同一窗口还是新窗口中打开它。

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

宽度和高度 — 如果希望图像具有固定大小,请输入以像素为单位的值。将这两个值留空会使资产成为自适应资产。

使用视频时

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

chlimage_1-74

单击组件中的​编辑​可编辑以下Dynamic Media设置。

注意

默认情况下,Dynamic Media 视频组件为自适应组件。如果要使其具有固定大小,请在组件中将其设置为​高级​选项卡中的​宽度​和​高度

查看器预设 — 从下拉菜单中选择现有的视频查看器预设。如果未显示您要查找的查看器预设,则可能需要将其显示出来。请参阅管理查看器预设

单击组件中的​编辑​可编辑以下高级设置。

标题 — 更改视频的标题。

宽度和高度 — 如果希望视频具有固定大小,请输入以像素为单位的值。将这两个值留空会使视频成为自适应资产。

如何安全传输视频

在 AEM 6.2 中,如果您安装了 FP-13480,则可以控制是通过安全的 SSL 连接 (HTTPS) 还是不安全的连接 (HTTP) 来传输视频。默认情况下,视频传输协议会自动继承嵌入式网页的协议。如果网页通过 HTTPS 加载,则视频也会通过 HTTPS 进行传输。反之,如果网页通过 HTTP 加载,则视频也会通过 HTTP 进行传输。在大多数情况下,此默认行为不会产生问题,故而无需更改任何配置。不过,您可以通过以下方法覆盖此默认行为,以强制使用安全的视频传输方式:将 VideoPlayer.ssl=on 附加到 URL 路径末尾或嵌入式代码片段的其他查看器配置参数列表中。

有关视频安全传输和在 URL 路径中使用 VideoPlayer.ssl 配置属性的更多信息,请参阅《查看器参考指南》中的视频安全传输。除视频查看器之外,安全视频投放还可用于混合媒体查看器和交互式视频查看器。

交互式媒体组件

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

交互式媒体组件是智能的 — 根据您添加的是图像还是视频,您有各种选项。 此外,查看器具有响应性。 也就是说,屏幕的大小会根据屏幕大小自动更改。 所有查看器都是基于HTML5的查看器。

chlimage_1-75

您可以通过在组件中单击​编辑,来编辑以下​常规​设置。

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

标题 — 更改视频的标题。

宽度和高度 — 如果希望视频具有固定大小,请输入以像素为单位的值。将这两个值留空会使视频成为自适应资产。

您可以通过在组件中单击​编辑,来编辑以下​添加到购物车​设置。

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

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

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

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now