[AEM Assets]{class="badge positive" title="適用於AEM Assets)。"}

與Dynamic Media整合 integrate-dynamic-media

最後更新： 2026年7月7日

適用對象：
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