将 Dynamic Media 资产添加到页面

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

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

注意

您必须先发布资产,然后才能将其添加到AEM中的页面。 See Publishing Dynamic Media Assets.

Adding a Dynamic Media component to a page

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

将Dynamic Media组件添加到页面

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

  2. 在左窗格中,点按组 件图 标,然后筛选Dynamic Media。

    如果没有可用的Dynamic Media组件列表,您可能需要启用要使用的Dynamic Media组件。 See Enabling Dynamic Media components.

    6_5_360video_wcmcomponent

  3. 拖动 Dynamic Media 组件,将其放到页面上的所需位置。

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

    6_5_360video_wcmcomponentconfigure

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

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

    视频360媒体组件

    Dynamic Media Video 360媒体组件。

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

启用Dynamic Media组件

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

  1. 在 AEM 中,打开您要添加 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图像资源。
  • 视频360媒体 -用于360视频和360 VR视频资源。
注意

这些组件默认不可用,在使用之前需要通过模板编辑器使用。 在模板编辑器中使组件可用后,您可以像添加任何其他AEM组件一样将组件添加到页面。

6_5_dynamicmediawcmcomponents

组件:Dynamic Media

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

注意

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

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

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

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

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

  • 图像具有金字塔 TIFF 文件。在启用 Dynamic Media 之前导入的图像没有金字塔 TIFF 文件。

处理图像时

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

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

You can edit the following Dynamic Media Settings by tapping the Edit icon in the component and then Dynamic Media Settings.

dm-settings-image-preset

注意

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

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

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

  • 查看器修饰符-查看器修饰符采用名称=值对和分隔符的形式,允许您根据《查看器参考指南》中的概述更改查看器。 查看器修饰符的示例是 posterimage=img.jpg&caption=text.vtt,1 为视频缩略图设置不同的图像并将隐藏字幕/子标题文件与视频相关联。

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

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

  • 图像修饰符-可以通过提供其他图像命令来应用图像效果。 这些内容在图像预设和图像服务命令参考中进行了介绍。

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

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

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

    You can edit the following Advanced Settings by tapping Edit in the component.

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

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

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

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

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

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

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

处理视频时

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

chlimage_1-173

You can edit the following Dynamic Media Settings by clicking Edit in the component.

注意

默认情况下,Dynamic Media 视频组件为自适应组件。If you want to make it a fixed size, set it in the component with the Width and Height in the Advanced tab.

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

  • 查看器修饰符-查看器修饰符采用名称=值对和分隔符的形式,允许您根据《Adobe查看器参考指南》中的概述更改查看器。 查看器修饰符的示例为 posterimage=img.jpg&caption=text.vtt,1

    例如,通过查看器修饰符,可以执行以下操作:

    • 将题注文件与视频关联: 字幕
    • 将导航文件与视频关联: 导航

    You can edit the following Advanced Settings by clicking Edit in the component.

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

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

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

使用Smart Crop时

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

请参 阅将智能裁剪与AEM Assets动态媒体结合使用

另请参阅 图像用户档案

dm-settings-smart-crop

You can edit the following Dynamic Media Setting by clicking Edit in the component.

注意

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

  • 图像修饰符-可以通过提供其他图像命令来应用图像效果。 这些内容在图像预设和图像服务命令参考中进行了介绍。

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

    You can edit the following Advanced Settings by clicking Edit in the component.

  • 启用长宽比匹配-选择此选项可让Dynamic Media选取宽高比与原始图像的长宽比最匹配的智能裁剪再现。

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

  • 替换文本-为关闭图形的用户添加智能裁剪图像的标题。

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

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

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

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

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

组件:交互式媒体

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

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

注意

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

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

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

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

chlimage_1-174

You can edit the following General settings by tapping Edit in the component.

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

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

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

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

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

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

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

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

组件:全景媒体

全景媒体组件适用于那些球面全景图像的资源。 这些图像提供房间、房产、位置或风景的360°查看体验。 要使图像成为球面全景图,它必须具有以下任一或两项:

  • 宽高比为2:1。
  • 使用关键字 equirectangular 或(spherical + panorama)或(spherical + panoramic)标记。 请参 阅使用标记

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

注意

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

  • 在同一页 面上使用 Panoramic Media组件的多个实例。
  • 每个实例都使用相同的资产类型。

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

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

panoramic-media-viewer-preset

通过点按组件中的配置,可 以编辑 以下设置。

  • 查看器预设-从查看器预设下拉菜单中选择现有的查看器。

如果未显示您要查找的查看器预设,请检查以确保其已发布。 您必须先发布查看器预设,然后才能使用它们。 请参阅管理查看器预设

组件:视频360媒体

使用视 频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,从而提供更好的响应和加载时间。

关使用Dynamic Media帐户 HTTP/2入门的完整详细信息,请参阅内容的HTTP2投放。

在此页面上