將 Dynamic Media 資產新增至頁面

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

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

將Dynamic Media元件新增至頁面

將Dynamic Media元件新增至頁面，與將元件新增至任何頁面相同。 以下章節將詳細說明Dynamic Media元件。

1. 在AEM中，開啟您要新增Dynamic Media元件的頁面。

2. 在頁面左側的面板中（您可能需要切換側面板的顯示），按一下​元件​圖示。

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

   

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

5. 將滑鼠指標直接暫留在元件上。 當元件被藍色框包圍時，點選一次以顯示元件的工具列。 點選「Configuration（扳手）」圖示。

6. 視需要 編輯元件，然後按一下核取記號以儲存變更。

啟用Dynamic Media元件

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

1. 在AEM中，開啟您要新增Dynamic Media元件的頁面。

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

   

3. 在工具列的靠近頁面頂端的右側，從下拉式清單中，點選​Structure。

   

4. 在頁面底部附近，點選「 Layout Container 」以開啟其工具列，然後點選「 Policy 」圖示。

5. 在「佈局容器」頁的「屬性」標題下，確保選中「允許的元件」頁簽。

   

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

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

   

8. 在「版面容器」頁面的右上角附近，點選「完成」（勾選記號）圖示。

9. 在工具列的靠近頁面頂端的右側，從下拉式清單中，點選​初始內容，然後照常將Dynamic Media元件新增至頁面。

將Dynamic Media元件當地語系化

您可以透過下列兩種方式之一，將Dynamic Media元件當地化：

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

  

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

  注意

  請注意，並非所有​Language​功能表中可用的語言當前都已分配令牌。

Dynamic Media元件

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

Dynamic Media元件

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

使用影像時

Dynamic Media元件可讓您新增動態影像，包括影像集、回轉集和混合媒體集。 您可以放大、縮小，如果適用，可以在回轉集內開啟影像，或從另一類型的集合中選取影像。

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

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

• 檢視
  器預設從下拉式選單中選取現有的檢視器預設集。如果您要尋找的檢視器預設集未顯示，您可能需要將其顯示。 請參閱管理檢視器預設集。 如果您使用影像預設集，則無法選取檢視器預設集，反之亦然。
  如果您檢視影像集、回轉集或混合媒體集，此選項是唯一可用的選項。 顯示的檢視器預設集也是智慧型的 — 僅顯示相關的檢視器預設集。

• 檢視
  器修飾元檢視器修飾元會以名稱=值配對和分隔字元的形式，並可讓您依照檢視器參考指南中的概述來變更檢視器。查看器修飾符的示例是後驗影像=img.jpg&caption=text.vtt,1，它為視頻縮略圖設定不同的影像，並將隱藏式字幕/字幕檔案與視頻關聯。

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

• 影像修
  飾符您可以通過提供其他影像命令來應用影像效果。這些在「影像預設集」和「影像伺服命令」參考中有說明。
  如果您正在檢視影像集、回轉集或混合媒體集，則無法使用此選項。

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

• ​
  標題變更影像的標題。

• 替
  代文本為那些關閉圖形的用戶添加影像標題。如果您正在檢視影像集、回轉集或混合媒體集，則無法使用此選項。

• URL，在中
  開啟您可以設定資產以開啟連結。設定URL，然後在「開啟」中（在中）指出您要在相同視窗還是新視窗中開啟它。
  如果您正在檢視影像集、回轉集或混合媒體集，則無法使用此選項。

• ​​Widthand ​
  HeightEnter值（以像素為單位），如果希望影像大小固定。將這些值保留為空白，可讓資產具有適用性。

使用視訊時

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

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

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

• 檢視
  器修飾元檢視器修飾元會以名稱=值配對和分隔字元的形式，並可讓您依照Adobe檢視器參考指南中的概述來變更檢視器。檢視器修飾詞的範例為後驗影像=img.jpg&caption=text.vtt,1

  例如，使用檢視器修飾元，您可以執行下列操作：

  • 將字幕檔案與視頻字幕關聯。
  • 將導航檔案與視頻導航關聯。

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

• ​
  標題變更視訊的標題。

• ​​如果您 ​
  希望視訊大小固定，請以像素為單位輸入值。將這些值保留為空白，可使其變得最適化。

使用智慧型裁切時

使用Dynamic Media元件將智慧型裁切影像資產新增至網頁。 編輯元件時，您可以選擇使用預先定義的視訊檢視器預設集來在頁面上播放視訊。

另請參閱影像設定檔。

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

• 影像修
  飾符您可以通過提供其他影像命令來應用影像效果。這些在「影像預設集」和「影像伺服命令」參考中有說明。
  如果您正在檢視影像集、回轉集或混合媒體集，則無法使用此選項。

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

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

• 替
  代文本為關閉圖形的用戶在智慧裁切影像中添加標題。如果您正在檢視影像集、回轉集或混合媒體集，則無法使用此選項。

• URL，在中
  開啟您可以設定資產以開啟連結。設定URL，然後在「開啟」中（在中）指出您要在相同視窗還是新視窗中開啟它。
  如果您正在檢視影像集、回轉集或混合媒體集，則無法使用此選項。

• ​​如果您 ​
  希望智慧型裁切影像大小固定，請高度和寬度輸入值（以像素為單位）。將這些值保留為空白，可使其變得最適化。

互動式媒體元件

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

互動式媒體元件是智慧型的 — 根據您添加的影像還是視頻，您有各種選項。 此外，檢視器回應速度快 — 螢幕大小會根據螢幕大小自動變更。 所有檢視器都是HTML5檢視器。

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

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

• ​
  標題變更視訊的標題。

• ​​如果您 ​
  希望視訊大小固定，請以像素為單位輸入值。將這些值保留為空白，可使其變得最適化。

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

• 顯示產
  品資產預設為選取此值。產品資產會依照商務模組中的定義顯示產品的影像。 清除勾號以不顯示產品資產。

• 顯示產
  品價格預設情況下，此值為選定值。產品價格顯示商務模組中定義的項目價格。 清除勾號以不顯示產品價格。

• 顯示產
  品表單預設情況下，此值未選中。產品表單包含任何產品變體，例如大小和顏色。 清除勾號以不顯示產品變體。

全景媒體元件

全景媒體元件用於那些為球形全景影像的資產。 這些影像提供360°的房間、屬性、位置或景觀的觀看體驗。 要使影像符合球形全景，它必須具有以下一個或兩個：

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

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

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

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

如果您要尋找的檢視器預設集未顯示，請核取以確認其已發佈。 您必須先發佈檢視器預設集，才能使用它們。 請參閱管理檢視器預設集。

使用HTTP/2來傳送Dynamic Media資產

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

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