文档AEM用户指南

[AEM Assets]{class="badge positive" title="适用于AEM Assets)。"}

与Dynamic Media集成 integrate-dynamic-media

最近更新： 2026年6月17日
  • 适用对象：
  • Experience Manager as a Cloud Service

创建对象：

  • Admin
  • User

内容审查程序与Dynamic Media集成，使用户能够浏览、预览和选择Dynamic Media演绎版，以供在其应用程序和工作流中使用。 用户可以从可用的演绎版、图像预设、智能裁剪中进行选择，并应用支持的Dynamic Media修饰符来自定义资产交付。 以下部分将介绍如何处理选定的演绎版信息，以及如何生成Dynamic Media投放URL以供在应用程序中使用。

使用selectedMedia构建Dynamic Media URL build-dynamic-media-urls-selectedmedia

当用户从“内容审查程序”的“动态媒体”面板选择“动态媒体”演绎版时，selectedMedia对象中会返回选定的演绎版信息。 主机应用程序必须使用此信息生成相应的Dynamic Media投放URL。

NOTE
主机应用程序必须实施本节中描述的URL生成逻辑，才能使用从内容审查器中选择的Dynamic Media演绎版。 所选的演绎版信息将作为元数据返回，并且不会自动转换为投放URL。

selectedMedia对象 selectedmedia-object

selectedMedia对象已添加到所选资源，并包含有关用户所选Dynamic Media演绎版的信息。

'selectedMedia': Array<{
    base?: string;
    preset?: string;
    smartcrop?: string;
    modifiers?: Array<string>;
    apiStyle?: 'scene7' | 'openapi'
}>;

selectedMedia对象包含以下属性：

属性
描述
base
选定的基础演绎版。
preset
选定的图像预设。
smartcrop
选定的智能裁剪演绎版。
modifiers
用户添加的一个或多个Dynamic Media修饰符。
apiStyle
指示所选呈现版本是使用Scene7 (scene7)还是OpenAPI (openapi)投放栈栈。

例如，当用户选择基本演绎版并应用rotate=90修饰符时，返回的对象类似于以下内容：

selectedMedia: {
    apiStyle: "scene7",
    base: "scene7company/image",
    modifiers: ["rotate=90"]
}

查看Dynamic Media呈现版本

访问handleSelection回调中的selectedMedia access-selectedmedia

选择演绎版后，handleSelection回调返回的selectedAssets有效负载中的selectedMedia对象将变得可用。

async function handleSelection(assets) {

    const dmUrls = [];

    assets.forEach((asset) => {

        if(asset?.selectedMedia){

            const dmUrl = createDMUrlFromSelectedMedia(
                asset.selectedMedia,
                asset
            );

            dmUrls.push({ asset, dmUrl });

        }

    });
}

回调将遍历选定的资源。 对于包含selectedMedia对象的每个资产，应用程序会使用选定的演绎版信息生成Dynamic Media URL。

生成Dynamic Media URL generate-dynamic-media-url

以下函数验证所选的演绎版信息并确定应使用的Dynamic Media投放栈栈。

const DM_OPENAPI_API_STYLE = 'openapi';
const DM_SCENE7_API_STYLE = 'scene7';
const ASSET_REPO_NAME_KEY = 'repo:name';
const ASSET_REPO_ID_KEY = 'repo:id';
const REPO_ID_KEY = 'repo:repositoryId';

export const createDMUrlFromSelectedMedia = (
    selectedMedia,
    repoMetadata
) => {
    if (!selectedMedia || !selectedMedia?.apiStyle) {
        throw new Error(
            'Selected media or api style is not valid'
        );
    }

    if (
        selectedMedia?.apiStyle === DM_OPENAPI_API_STYLE
    ) {
        return buildDMOpenApiUrl(
            selectedMedia,
            repoMetadata
        );
    } else if (
        selectedMedia?.apiStyle === DM_SCENE7_API_STYLE
    ) {
        return buildDMScene7Url(
            selectedMedia,
            repoMetadata
        );
    }
};

此函数执行以下操作：

  • 验证所选演绎版是否包含apiStyle值。
  • 确定所选演绎版使用的是具有OpenAPI功能的Dynamic Media还是Dynamic Media Scene7。
  • 根据选定的投放栈栈调用相应的URL生成函数。

构建Dynamic Media OpenAPI URL build-openapi-url

以下函数使用选定的演绎版信息和存储库元数据生成Dynamic Media OpenAPI URL。

export const buildDMOpenApiUrl = (
    selectedMedia,
    repoMetadata
) => {
    const { base, preset, smartcrop, modifiers }
        = selectedMedia;

    const dmDomain =
        repoMetadata?.[REPO_ID_KEY]
            .replace('author-', 'delivery-');

    const assetName =
        repoMetadata?.[ASSET_REPO_NAME_KEY];

    const assetId =
        repoMetadata?.[ASSET_REPO_ID_KEY];

    const seoName =
        assetName?.split('.')[0];

    const assetFormat =
        repoMetadata?.['dc:format'];

    let dmUrl;

    if (
        assetFormat &&
        assetFormat.startsWith('video/')
    ) {

        dmUrl =
`https://${dmDomain}/adobe/assets/${assetId}/play`;

    } else {

        dmUrl =
`https://${dmDomain}/adobe/assets/${assetId}/as/${seoName}.avif`;

        if (base) {
        } else if (preset) {
            dmUrl =
`${dmUrl}?preset=${preset}`;
        } else if (smartcrop) {
            dmUrl =
`${dmUrl}?smartcrop=${smartcrop}`;
        }
    }

    if (modifiers && dmUrl) {

        const modifierString =
            getModifierString(selectedMedia);

        if(base) {
            dmUrl =
`${dmUrl}?${modifierString}`;
        } else {
            dmUrl =
`${dmUrl}&${modifierString}`;
        }
    }

    return dmUrl;
};

此函数：

  • 检索构建投放URL所需的存储库信息。
  • 创建基本OpenAPI投放URL。
  • 将选定的预设或智能裁剪附加到URL（如果适用）。
  • 附加任何用户选择的修饰符。
  • 返回最终OpenAPI投放URL。

对于视频资产，函数会生成Dynamic Media视频播放器URL。

构建Dynamic Media Scene7 URL build-scene7-url

以下函数生成Dynamic Media Scene7 URL。

export const buildDMScene7Url = (
    selectedMedia,
    repoMetadata
) => {

    const {
        base,
        preset,
        smartcrop,
        modifiers
    } = selectedMedia;

    let scene7Domain =
        repoMetadata?.['repo:scene7Domain'];

    const scene7File =
        repoMetadata?.['repo:scene7File'];

    if (!scene7Domain || !scene7File) {
        return null;
    }

    scene7Domain =
        scene7Domain.startsWith('http://')
        ? scene7Domain.replace(
            'http://',
            'https://'
          )
        : scene7Domain;

    scene7Domain =
        scene7Domain?.endsWith('/')
        ? scene7Domain
        : `${scene7Domain}/`;

    let dmUrl;

    if (base) {

        dmUrl =
`${scene7Domain}is/image/${base}`;

    } else if (preset) {

        dmUrl =
`${scene7Domain}is/image/${scene7File}?$${preset}$`;

    } else if (smartcrop) {

        dmUrl =
`${scene7Domain}is/image/${scene7File}:${smartcrop}`;
    }

    if (modifiers && dmUrl) {

        const modifierString =
            getModifierString(selectedMedia);

        if (preset) {
            dmUrl =
`${dmUrl}&${modifierString}`;
        } else {
            dmUrl =
`${dmUrl}?${modifierString}`;
        }
    }

    return dmUrl;
};

此函数：

  • 从存储库元数据中检索Scene7域和资产信息。
  • 为选定的基本演绎版、图像预设或智能裁剪创建URL。
  • 附加任何选定的修饰符。
  • 返回最终的Scene7投放URL。

生成修饰符字符串 generate-modifiers-string

以下辅助函数将修饰符数组转换为与URL兼容的查询字符串。

export const getModifierString = (
    selectedMedia
) => {

    const { modifiers } = selectedMedia;

    if (modifiers) {

        const modifierString =
            modifiers.length > 0
                ? modifiers.join('&')
                : '';

        return modifierString;
    }

    return null;
};

函数将所有选定的修饰符合并为一个字符串，以&符号(&)分隔。

例如：

[
    'rotate=90',
    'width=1200'
]

返回：

rotate=90&width=1200

生成的字符串将附加到最终Dynamic Media URL，并在交付资产时应用选定的转换。

recommendation-more-help
experience-manager-cloud-service-help-main-toc