将Dynamic Media Assets添加到页面

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

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

注意

确保在将资产添加到Experience Manager的页面之前先发布资产。 请参阅发布Dynamic Media Assets

将Dynamic Media组件添加到页面

向页面添加3D媒体、Dynamic Media、交互式媒体、全景媒体、智能裁剪视频或视频360媒体组件与向任何页面添加组件相同。

要将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 Media​组件对话框以及“查看器预设”下拉列表中提供的选项。

    视频360媒体组件

    Dynamic Media视频360媒体组件。

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

启用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. 在页面顶部附近工具栏右侧的下拉列表中,选择​初始内容

  10. 将Dynamic Media组件添加到常规 页面。

将Dynamic Media组件本地化

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

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

    chlimage_1-172

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

    注意

    并非所有可用于​语言​菜单的语言都已分配当前的令牌。

可用的Dynamic Media组件

当您选择​组件​图标,然后对​Dynamic Media​进行筛选时,即可使用Dynamic Media组件。

可用的Dynamic Media组件包括:

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

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

6_5_dynamicmediawcmcomponents

组件:Dynamic Media

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

注意

如果您的网页具有以下功能:

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

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

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

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

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

处理图像时

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

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

您可以编辑以下Dynamic Media设置,方法是:选择组件中的​编辑​图标,然后选择​Dynamic Media设置

Dynamic Media图像预设设置

注意

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

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

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

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

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

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

  • 图像修饰符 — 您可以通过提供更多图像命令来应用图像效果。这些命令在“图像预设”和“图像提供命令”参考中有介绍。

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

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

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

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

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

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

    • 在“预设类型”下,选择​图像预设,并从“图像预设”下拉列表中选择​RESS_IP

    图像预设中的设备像素比率设置

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

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

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

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

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

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

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

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

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

处理视频时

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

chlimage_1-173

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

注意

默认情况下,Dynamic Media 视频组件为自适应组件。如果要使其变为固定大小,请在组件的​Advanced​选项卡中使用​Width​和​Height​设置它。

  • 查看器预设 — 从下拉列表中选择一个现有的视频查看器预设。如果您要查找的查看器预设不可见,则必须使其可见。 请参阅管理查看器预设。

  • 查看器修饰符 — 查看器修饰符采用与分 name=value 隔符成对 & 的形式。它们允许您按照《Adobe查看器参考指南》中所述更改查看器。 查看器修饰符的示例为posterimage=img.jpg&caption=text.vtt,1

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

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

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

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

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

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

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

使用智能裁剪时

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

请参阅对Experience Manager资产使用智能裁剪Dynamic Media

另请参阅图像配置文件

Dynamic Media智能裁剪设置

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

注意

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

  • 图像修饰符 — 您可以通过提供更多图像命令来应用图像效果。这些命令在“图像预设”和“图像提供命令”参考中有介绍。

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

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

  • 启用宽高比匹配 — 要让Dynamic Media选取宽高比与原始图像的宽高比最匹配的智能裁剪呈现,请选择此选项。

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

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

    • 在预设类型下,选择了​智能裁剪​选项。

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

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

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

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

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

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

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

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

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

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

组件:交互式媒体

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

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

注意

如果您的网页具有以下功能:

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

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

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

chlimage_1-174

通过在组件中选择​编辑,可以编辑以下​常规​设置。

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

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

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

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

    您可以通过选择组件中的​编辑​来编辑以下​添加到购物车​设置。

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

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

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

组件:全景媒体

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

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

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

注意

如果您的网页具有以下功能:

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

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

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

全景媒体查看器预设

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

  • 查看器预设 — 从“查看器预设”下拉列表中选择一个现有的查看器。

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

组件:视频360媒体

使用​Video 360 Media​组件在您的网页上呈现等矩形视频。 这样做可确保房间、房产、位置、景观或医疗程序的沉浸式观看体验。

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

查看器包含对交付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内容交付 ,以了解有关使用Dynamic Media帐户的HTTP/2入门的完整详细信息。

在此页面上