將 Dynamic Media 資產新增至頁面

若要將動態媒體功能新增至您在網站上使用的資產,您可以直接在頁面上新增​Dynamic Media​或​互動式媒體​元件。 若要這麼做,請進入「版面」模式並啟用動態媒體元件。 然後,您可以將這些元件新增至頁面,並新增資產至元件。動態媒體和互動式媒體元件是智慧型的——他們知道您要新增影像或視訊,而可用的選項也會隨之改變。

如果您使用動態媒體資產做為WCM,請直接將動態媒AEM體資產新增至頁面。 如果您使用協力廠商來處理WCM,請連結 內嵌資 產。如需多方互動網站,請參閱將最佳化 的影像傳送至多方互動網站

注意

您必須先發佈資產,才能將資產新增至AEM頁面。 請參閱發佈Dynamic Media資產

將Dynamic Media元件添加到頁面

將Dynamic Media元件添加到頁面與將元件添加到任何頁面相同。 以下各節將詳細介紹Dynamic Media各組成部分。

注意

如果網頁上有具有唯讀權限的使用者存取的Dynamic Media元件,則分頁符和元件無法正確呈現。 原因在於,重建頁面是為了確保元件的屬性良好,且可存取任何參考的資產和組態。 然後再次呈現頁面,導致元件中斷;由於使用者的唯讀存取權,無法重新轉譯頁面上的個別元件代碼。

為避免此問題,請確定AEM Sites使用者擁有存取資產的必要權限。

  1. 在AEM中,開啟要添加Dynamic Media元件的頁。

  2. 在頁面左側的面板(您可能需要切換側面板的顯示)中,按一下「元件​」圖示。

  3. 在​元件​標題下,在下拉清單中,選擇​Dynamic Media。 如果沒有可用的Dynamic Media元件清單,您可能需要啟用要使用的Dynamic Media元件。 請參閱啟用Dynamic Media元件

    chlimage_1-537

  4. 將您要使用的Dynamic Media元件拖曳至所需位置的頁面。

  5. 將滑鼠指標直接暫留在元件上。 當元件被藍色方塊包圍時,點選一次即可顯示元件的工具列。 點選「Configuration(扳手)」圖示。

  6. 視需要編 輯元件,然後按一下核取標籤以儲存變更。

啟用Dynamic Media元件

如果沒有可新增至頁面的Dynamic Media元件,可能表示您必須先啟用要使用的元件。

  1. 在AEM中,開啟要添加Dynamic Media元件的頁。

  2. 在工具列的靠近頁面頂端的左側,點選「頁面資訊」圖示,然後從下拉式清單中點選「編輯範本」。

    edit-template

  3. 在工具列右側靠近頁面頂部的下拉式清單中,點選​結構

    政策

  4. 在頁面底部附近,點選「Layout Container(版面容器)」以開啟其工具列,然後點選「Policy(原則)」圖示。

  5. 在​版面容器​頁面的​屬性​標題下,請確定已選取「允許的元件​]」標籤。[

    允許的元件

  6. 捲動直到您看到​Dynamic Media

  7. 點選​Dynamic Media​左側的>圖示以展開清單,選取您要啟用的Dynamic Media元件。

    Dynamic Media元件清單

  8. 在​版面容器​頁面的右上角,點選「完成(勾選)」圖示。

  9. 在靠近頁面頂部的工具列右側,從下拉式清單中,點選「初始內容」,然後按一下「Dynamic Media元件」至頁面。

本地化Dynamic Media元件

您可以以兩種方式將Dynamic Media元件本地化:

  • 在「網站」的網頁中,開啟「屬 」並選 取「進階 」標籤。選擇所要的本地化語言。

    chlimage_1-538

  • 從網站選取器中,選取所要的頁面或頁面群組。 點選「屬性」並選取「進階」標籤。 選擇所要的本地化語言。

    注意

    請注意,Language​功能表中的所有語言目前並未指派Token。

Dynamic Media元件

Dynamic Media和互動式媒體位於元件的Dynamic Media標籤下。 您可將互動式媒體元件用於任何互動式資產,例如互動式視訊、互動式影像或轉盤集。 對於所有其他動態媒體元件,請使用Dynamic Media元件。

注意

這些元件預設不可用,在使用之前必須先透過範本編輯器提供。 在範本編輯器 中使用這些元件後,您就可以像新增其他元件一樣,將元件新增至您的AEM頁面。

chlimage_1-539

Dynamic Media元件

Dynamic Media元件是智慧型的——視您新增影像或視訊而定,您有各種選項。 此元件支援影像預設集、影像檢視器,例如影像集、回轉集、混合媒體集和視訊。 此外,檢視器回應速度快。 也就是說,螢幕大小會根據螢幕大小自動變更。 所有檢視器都是HTML5檢視器。

注意

如果網頁上有Dynamic Media元件、互動式媒體元件,或兩者皆由具有唯讀權限的使用者存取,分頁和元件將無法正確呈現。 原因在於,重建頁面是為了確保元件的屬性良好,且可存取任何參考的資產和組態。 然後再次呈現頁面,導致元件中斷;由於使用者的唯讀存取權,無法重新轉譯頁面上的個別元件代碼。

為避免此問題,請確定AEM Sites使用者擁有存取資產的必要權限。

注意

當您新增Dynamic Media元件,且​Dynamic Media設定​空白或無法正確新增資產時,請勾選下列項目:

  • 您已啟用Dynamic Media。 Dynamic Media預設為停用。
  • 該影像具有金字塔tiff檔案。 在啟用動態媒體之前匯入的影像沒有金字塔tiff檔案。

使用影像時

Dynamic Media元件可讓您新增動態影像,包括影像集、回轉集和混合媒體集。 您可以放大、縮小,如果適用,則可以在回轉集內旋轉影像,或從其他類型的回轉集選取影像。

您也可以直接在元件中設定檢視器預設集、影像預設集或影像格式。 若要讓影像回應,您可以設定中斷點或套用回應式影像預設集。

您必須按一下元件中的​Edit​圖示,然後按一下​Dynamic Media設定,編輯下列Dynamic Media設定。

dm-settings-image-preset

注意

依預設,動態媒體影像元件是可調式的。如果要使其成為固定大小,請在​Advanced​標籤的元件中設定它,並使用​Width​和​Height​設定。

  • 檢視
    器預設從下拉式選單中選取現有的檢視器預設。如果您所尋找的檢視器預設集不可見,您可能需要將它顯示。 請參閱管理檢視器預設集。 如果您使用影像預設集,則無法選取檢視器預設集,反之亦然。
    如果您要檢視影像集、回轉集或混合媒體集,這是唯一可用的選項。 顯示的檢視器預設集也很聰明——只會顯示相關的檢視器預設集。

  • 檢視
    器修飾元檢視器修飾元採用名稱=值配對與&分隔字元的形式,讓您變更檢視器,如檢視器參考指南所述。檢視器修飾元的範例為postemage=img.jpg&caption=text.vtt,1,其為視訊縮圖設定不同的影像,並將隱藏字幕/子標題檔案與視訊建立關聯。

  • 影像
    預設集從下拉式選單中選取現有的影像預設集。如果您要尋找的影像預設集不可見,您可能需要將它顯示。 請參閱管理影像預設集。 如果您使用影像預設集,則無法選取檢視器預設集,反之亦然。
    如果您正在檢視影像集、回轉集或混合媒體集,則此選項不可用。

  • 影像修
    飾元您可以提供額外的影像指令,以套用影像效果。這些說明在「影像預設集」和「影像伺服命令」參考中。
    如果您正在檢視影像集、回轉集或混合媒體集,則此選項不可用。

  • 中斷
    點如果您在回應式網站上使用此資產,則需要新增影像中斷點。影像中斷點必須以逗號(,)分隔。 當影像預設集中未定義高度或寬度時,此選項便可運作。
    如果您正在檢視影像集、回轉集或混合媒體集,則此選項不可用。
    按一下元件中的​Edit​可以編輯以下高級設定。


  • 題變更影像的標題。

  • 替代
    文字為關閉圖形的使用者新增影像標題。如果您正在檢視影像集、回轉集或混合媒體集,則此選項不可用。

  • URL, Open
    inYou can set a sasset to open a link.設定URL,並在「開啟於」中指出您要在相同視窗或新視窗中開啟它。
    如果您正在檢視影像集、回轉集或混合媒體集,則此選項不可用。

  • Width Height
    Enter值(以像素為單位),如果您希望影像大小固定。將這些值留空可讓資產具適應性。

使用視頻時

使用Dynamic Media元件將動態視訊新增至您的網頁。 當您編輯元件時,您可以選擇使用預先定義的視訊檢視器預設集來播放頁面上的視訊。

chlimage_1-541

您必須按一下元件中的​Edit,編輯下列Dynamic Media設定。

注意

依預設,Dynamic Media視訊元件是可調式的。 如果要使其成為固定大小,請在元件中將其設定為​Width​和​Height(Advanced)頁籤。

  • 檢視
    器預設集從下拉式選單中選取現有的視訊檢視器預設集。如果您所尋找的檢視器預設集不可見,您可能需要將它顯示。 請參閱管理檢視器預設集。

  • 檢視
    器修飾元檢視器修飾元採用名稱=值配對與&分隔字元的形式,讓您變更檢視器,如Adobe檢視器參考指南所述。檢視器修飾元的範例為postemage=img.jpg&caption=text.vtt,1

    例如,您可以使用檢視器修飾元執行下列動作:

按一下元件中的​編輯​可以編輯以下高級設定。


  • 題變更影片標題。

  • Width Height如果您
    希望視訊大小固定,請輸入像素值。將這些值留空可讓其適應性。

使用Smart Crop時

使用Dynamic Media元件將Smart Crop影像資產添加到您的網頁。 當您編輯元件時,您可以選擇使用預先定義的視訊檢視器預設集來播放頁面上的視訊。

另請參閱映像配置檔案

dm-settings-smart-crop

按一下元件中的​編輯​可編輯以下Dynamic Media設定。

注意

依預設,動態媒體影像元件是可調式的。如果要使其成為固定大小,請在「高級」( Advanced )頁籤的元件中使用「寬度」( Width)和「高度」(Height )設定它

  • 影像修
    飾元您可以提供額外的影像指令,以套用影像效果。這些說明在「影像預設集」和「影像伺服命令」參考中。
    如果您正在檢視影像集、回轉集或混合媒體集,則此選項不可用。

按一下元件中的​編輯​可以編輯以下​高級​設定。


  • 題變更智慧型裁切影像的標題。

  • 替代
    文字為關閉圖形的使用者新增智慧型裁切影像的標題。如果您正在檢視影像集、回轉集或混合媒體集,則此選項不可用。

  • URL, Open
    inYou can set a sasset to open a link.設定URL,並在「開啟於」中指出您要在相同視窗或新視窗中開啟它。
    如果您正在檢視影像集、回轉集或混合媒體集,則此選項不可用。

  • 度和寬
    度如果您想要智慧型裁切影像的大小固定,請輸入像素值。將這些值留空可讓其適應性。

互動式媒體元件

互動式媒體元件適用於這些資產上具有互動功能的熱點或影像地圖。 如果您有互動式影像、互動式視訊或轉盤橫幅,請使用互動式媒體元件。

互動式媒體元件是智慧型的——視您新增影像或視訊而定,您有各種選項。 此外,檢視器具有互動功能——螢幕大小會根據螢幕大小自動變更。 所有檢視器都是HTML5檢視器。

注意

如果網頁上有Dynamic Media元件、互動式媒體元件,或兩者皆由具有唯讀權限的使用者存取,分頁和元件將無法正確呈現。 原因在於,重建頁面是為了確保元件的屬性良好,且可存取任何參考的資產和組態。 然後再次呈現頁面,導致元件中斷;由於使用者的唯讀存取權,無法重新轉譯頁面上的個別元件代碼。

為避免此問題,請確定AEM Sites使用者擁有存取資產的必要權限。

chlimage_1-541

按一下元件中的​Edit​可以編輯以下​General​設定。

  • 檢視
    器預設從下拉式選單中選取現有的檢視器預設。如果您所尋找的檢視器預設集不可見,您可能需要將它顯示。 檢視器預設集必須先發佈,才能使用。 請參閱管理檢視器預設集。


  • 題變更影片標題。

  • Width Height如果您
    希望視訊大小固定,請輸入像素值。將這些值留空可讓其適應性。

您可以按一下元件中的​編輯,編輯下列「新增至購物車」設定。

  • 顯示產
    品資產依預設,此值會選取。產品資產會依「商務」模組中的定義,顯示產品的影像。 清除核取標籤,不會顯示產品資產。

  • 顯示產
    品價格依預設,此值會選取。產品價格顯示「商務」模組中定義的項目價格。 清除勾號以不顯示產品價格。

  • 顯示產
    品表單依預設,此值未選取。「產品表單」包含任何產品變體,例如尺寸和顏色。 清除勾號,不顯示產品變數。

全景媒體元件

全景媒體元件適用於球形全景影像的資產。 此類影像可提供360°的房間、房產、位置或風景觀賞體驗。 若要符合球形全景的影像,它必須具備下列其中一個或兩個:

  • 寬高比為2:1。
  • 使用關鍵字"equirectangual"或("spherical" + "panorama")或("spherical" + "panoramic")加上標籤。 請參閱使用標籤

外觀比例和關鍵字准則都適用於資產詳細資料頁面和「全景媒體」WCM元件的全景資產。

panoramic-media-viewer-preset

您可以在元件中點選​Configure​來編輯下列設定。

  • 檢視
    器預設集從檢視器預設集下拉式選單中選取現有的檢視器。

如果您所尋找的檢視器預設集不可見,請勾選以確保已發佈。 您必須先發佈檢視器預設集,才能使用。 請參閱管理檢視器預設集

使用HTTP/2傳送Dynamic Media資產

HTTP/2是全新、更新的Web通訊協定,可改善瀏覽器和伺服器的通訊方式。 它提供更快速的資訊傳輸,並降低所需的處理能力。 Dynamic Media資產的傳送現在可透過HTTP/2,提供更佳的回應和載入時間。

如需開始使用HTTP/2與您的Dynamic Media帳戶的完整詳細資訊,請參閱HTTP2內容傳送

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now