将Dynamic Media资源添加到页面 adding-dynamic-media-assets-to-pages

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

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

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

将Dynamic Media组件添加到页面 adding-a-dynamic-media-component-to-a-page

向页面添加3D媒体、Dynamic Media、Interactive Media、Media Panoramic Media、Smart Crop Video或Video 360 Media组件与向任何页面添加组件相同。

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

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

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

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

    6_5_360video_wcmcomponent

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

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

    6_5_360video_wcmcomponentconfigure

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

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

    视频360媒体组件

    Dynamic Media Video 360媒体组件。

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

启用Dynamic Media组件 enabling-dynamic-media-components

如果没有可添加到页面的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. 在靠近页面顶部的工具栏右侧,从下拉列表中选择 初始内容.

  10. 将Dynamic Media组件添加到页面 和往常一样。

本地化Dynamic Media组件 localizing-dynamic-media-components

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

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

    chlimage_1-172

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

    note note
    NOTE
    并非所有可用语言都在 语言 菜单当前已分配令牌。

可用的Dynamic Media组件 dynamic-media-components

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

可用的Dynamic Media组件包括:

  • Dynamic Media - 用于图像、视频、电子目录和旋转集等资产。
  • 交互式媒体 — 用于任何交互式资产,例如交互式视频、交互式图像或轮播集。
  • 全景媒体 — 用于全景图像或VR全景图像资源。
  • Video 360媒体 — 用于360视频和360 VR视频资产。
NOTE
默认情况下,这些组件不可用,必须在使用之前通过模板编辑器使其可用。 在模板编辑器中提供组件后,您可以将组件添加到页面,就像添加任何其他组件一样 Experience Manager 组件。

6_5_dynamicmediawcmcomponents

组件:Dynamic Media dynamic-media-component

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

NOTE
如果您的网页具有以下内容:
  • 正在同一页面上使用的多个Dynamic Media组件实例。
  • 每个实例使用相同的资源类型。
不支持为该页面上的每个Dynamic Media组件分配不同的查看器预设。
但是,您可以为页面内使用相同类型资产的所有Dynamic Media组件使用相同的查看器预设。

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

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

使用图像时 when-working-with-images

通过Dynamic Media组件,可添加动态图像,包括图像集、旋转集和混合媒体集。 您可以放大、缩小旋转集中的图像或从其他类型的旋转集中选择图像(如果适用)。

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

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

Dynamic Media图像预设设置

NOTE
默认情况下,Dynamic media图像组件是自适应的。 如果要使其变为固定大小,请在“高级”选项卡的组件中设置 ,并使用“宽度”和“高 ​度”
  • 查看器预设 — 从下拉列表中选择现有的查看器预设。 如果您要查找的查看器预设不可见,则必须使其可见。 请参阅管理查看器预设。 如果您使用的是图像预设,则无法选择查看器预设,反之亦然。

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

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

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

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

  • 图像修饰符 — 通过提供更多的图像命令来应用图像效果。 这些命令在图像预设和图像服务命令参考中介绍。

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

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

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

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

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

    针对更高分辨率设备进行优化 仅当满足以下条件时,才会显示选项:

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

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

    另请参阅 关于设备像素比优化.

    任何 Experience Manager Dynamic Media智能成像DPR值将被忽略。

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

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

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

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

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

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

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

使用视频时 when-working-with-video

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

chlimage_1-173

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

NOTE
默认情况下,Dynamic Media视频组件是自适应的。 如果要使其变为固定大小,请在组件中设置它,并使用 宽度高度高级 选项卡。
  • 查看器预设 — 从下拉列表中选择现有的视频查看器预设。 如果您要查找的查看器预设不可见,则必须使其可见。 请参阅管理查看器预设。

  • 查看器修饰符 — 查看器修饰符采用以下形式 name=value& 分隔符。 您可以使用它们更改查看器,如Adobe查看器参考指南中所述。 例如,查看器修饰符为 posterimage=img.jpg&caption=text.vtt,1

    例如,使用查看器修饰符,您可以执行以下操作:

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

    • 将导航文件与视频关联: 导航

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

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

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

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

使用智能裁剪时 when-working-with-smart-crop

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

请参阅 在Experience Manager Assets Dynamic Media中使用智能裁切

另请参阅 图像配置文件.

Dynamic Media智能裁剪设置

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

NOTE
默认情况下,Dynamic media图像组件是自适应的。 如果要使其变为固定大小,请在“高级”选项卡的组件中设置 ,并使用“宽度”和“高 ​度”
  • 图像修饰符 — 通过提供更多的图像命令来应用图像效果。 这些命令在图像预设和图像服务命令参考中介绍。

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

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

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

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

    针对更高分辨率设备进行优化 仅当满足以下条件时,才会显示选项:

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

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

    另请参阅 关于设备像素比优化.

    任何 Experience Manager Dynamic Media智能成像DPR值将被忽略。

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

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

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

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

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

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

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

组件:交互式媒体 interactive-media-component

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

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

NOTE
如果您的网页具有以下内容:
  • 同一页面上正在使用交互式媒体组件的多个实例。
  • 每个实例使用相同的资源类型。
不支持为该页面上的每个交互式媒体组件分配不同的查看器预设。
但是,您可以为页面内使用相同类型资产的所有交互式媒体组件使用相同的查看器预设。

chlimage_1-174

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

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

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

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

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

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

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

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

  • 显示产品表单 — 默认情况下,不选中此值。 产品表单包括任何产品变体,如大小和颜色。 清除复选标记将不显示产品变型。

组件:全景媒体 panoramic-media-component

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

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

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

NOTE
如果您的网页具有以下内容:
  • 的多个实例 全景媒体 正在同一页面上使用的组件。
  • 每个实例使用相同的资源类型。
为每个分配不同的查看器预设 全景媒体 该页面上的组件不受支持。
但是,您可以为页面内使用相同类型资产的所有全景媒体组件使用相同的查看器预设。

全景媒体查看器预设

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

  • 查看器预设 — 从查看器预设下拉列表中选择现有查看器。

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

组件:视频360媒体 video-media-component

使用 Video 360媒体 用于在网页上渲染等长视频的组件。 这样做可确保对房间、财产、位置、景观或医疗程序的沉浸式观看体验。

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

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

6_5_360video_wcmcomponent-1

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

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

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

使用HTTP/2交付Dynamic Media资源 using-http-to-delivery-dynamic-media-assets

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

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

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab