將Dynamic Media Assets新增至頁面 adding-dynamic-media-assets-to-pages
若要將動態媒體功能新增至您在網站上使用的資產,您可以新增 Dynamic Media 或 互動式媒體 元件。 若要這麼做,請進入「版面」模式並啟用動態媒體元件。 然後,您可以將這些元件新增至頁面,並新增資產至元件。動態媒體和互動式媒體元件是智慧型的,他們知道您是新增影像還是視訊,而可用的選項會隨之變更。
如果您使用AEM做為WCM,請直接將動態媒體資產新增至頁面。 如果您使用協力廠商來處理WCM,請連結 或 內嵌資 產。如需多方互動網站,請參閱將最佳化 的影像傳送至多方互動網站。
新增Dynamic Media元件至頁面 adding-a-dynamic-media-component-to-a-page
將Dynamic Media元件新增至頁面,與將元件新增至任何頁面相同。 以下章節將詳細說明Dynamic Media元件。
-
在AEM中,開啟您要新增Dynamic Media元件的頁面。
-
在頁面左側的面板中(您可能需要切換側面板的顯示),按一下 元件 表徵圖。
-
在 元件 標題,在下拉式清單中,選取 Dynamic Media. 如果沒有Dynamic Media元件清單可用,您可能需要啟用您要使用的Dynamic Media元件。 請參閱 啟用Dynamic Media元件.
-
將您要使用的Dynamic Media元件拖曳至所需位置的頁面。
-
將滑鼠指標直接暫留在元件上。 當元件被藍色框包圍時,點選一次以顯示元件的工具列。 點選 設定 (扳手)圖示。
-
編輯元件 視需要按一下核取記號以儲存變更。
啟用Dynamic Media元件 enabling-dynamic-media-components
如果沒有可新增至頁面的Dynamic Media元件,可能表示您必須先啟用您要使用的元件。
-
在AEM中,開啟您要新增Dynamic Media元件的頁面。
-
在工具列的左側,在頁面頂端附近,點選「頁面資訊」圖示,然後點選 編輯範本 從下拉式清單中。
-
在工具列的右側,在頁面頂端附近,從下拉式清單中,點選 結構.
-
在頁面底部附近,點選 版面容器 要開啟其工具欄,請點選「策略」表徵圖。
-
在 版面容器 頁面下方 屬性 標題,確定 允許的元件 頁簽。
-
捲動直到您看到 Dynamic Media.
-
點選左側的>圖示 Dynamic Media 若要展開清單,請選取您要啟用的Dynamic Media元件。
-
在 版面容器 頁面,點選「完成」(勾選記號)圖示。
-
在工具列的右側,在頁面頂端附近,從下拉式清單中,點選 初始內容,然後 將Dynamic Media元件新增至頁面 照常。
將Dynamic Media元件當地語系化 localizing-dynamic-media-components
您可以透過下列兩種方式之一,將Dynamic Media元件當地化:
-
在「網站」的網頁中,開啟「屬 性 」並選 取「進階 」標籤。選擇所要的本地化語言。
-
從網站選擇器中,選取所需的頁面或頁面群組。 點選 屬性 ,然後選取 進階 標籤。 選擇所要的本地化語言。
note note NOTE 請注意,並非所有語言皆可在 語言 功能表目前已指派代號。
Dynamic Media元件 dynamic-media-components
Dynamic Media和互動式媒體位於 Dynamic Media 標籤 元件. 您使用 互動式媒體 元件,適用於任何互動式資產,例如互動式視訊、互動式影像或輪播集。 對於所有其他動態媒體元件,請使用Dynamic Media元件。
Dynamic Media元件 dynamic-media-component
Dynamic Media元件是智慧型的,視您新增影像或影片而定,您有各種選項。 元件支援影像預設集、以影像為基礎的檢視器,例如影像集、回轉集、混合媒體集和視訊。 此外,檢視器回應速度快。 也就是說,螢幕的大小會根據螢幕大小自動變更。 所有檢視器均為HTML5檢視器。
- 您擁有 啟用Dynamic Media. Dynamic Media預設為停用。
- 影像具有金字塔Tiff檔案。 在啟用動態媒體之前匯入的影像沒有金字塔Tiff檔案。
使用影像時 when-working-with-images
Dynamic Media元件可讓您新增動態影像,包括影像集、回轉集和混合媒體集。 您可以放大、縮小,如果適用,可以在回轉集內開啟影像,或從另一類型的集合中選取影像。
您也可以直接在元件中設定檢視器預設集、影像預設集或影像格式。 若要讓影像具有回應性,您可以設定分界點或套用回應式影像預設集。
您必須按一下 編輯 圖示,然後 Dynamic Media設定.
-
檢視器預設集
從下拉式選單中選取現有的檢視器預設集。 如果您要尋找的檢視器預設集未顯示,您可能需要將其顯示。 請參閱管理檢視器預設集。 如果您使用影像預設集,則無法選取檢視器預設集,反之亦然。
如果您檢視影像集、回轉集或混合媒體集,此選項是唯一可用的選項。 顯示的檢視器預設集也是智慧型的 — 僅顯示相關的檢視器預設集。 -
檢視器修飾元
檢視器修飾元採用名稱=值配對和分隔字元的形式,可讓您依照檢視器參考指南中的概述來變更檢視器。 查看器修飾符的示例是後驗影像=img.jpg&caption=text.vtt,1,它為視頻縮略圖設定不同的影像,並將隱藏式字幕/字幕檔案與視頻關聯。 -
影像預設集
從下拉式選單中選取現有的影像預設集。 如果您要尋找的影像預設集未顯示,則您可能需要使其可見。 請參閱管理影像預設集。 如果您使用影像預設集,則無法選取檢視器預設集,反之亦然。
如果您正在檢視影像集、回轉集或混合媒體集,則無法使用此選項。 -
影像修飾元
通過提供其他影像命令,可以應用影像效果。 這些在「影像預設集」和「影像伺服命令」參考中有說明。
如果您正在檢視影像集、回轉集或混合媒體集,則無法使用此選項。 -
斷點
如果您在回應式網站上使用此資產,則需要新增影像中斷點。 影像斷點必須用逗號(,)分隔。 當影像預設集中未定義高度或寬度時,此選項即可運作。
如果您正在檢視影像集、回轉集或混合媒體集,則無法使用此選項。
您可以按一下「 」,編輯下列進階設定 編輯 在元件中。 -
標題
變更影像的標題。 -
替代文字
為那些已關閉圖形的用戶添加影像標題。
如果您正在檢視影像集、回轉集或混合媒體集,則無法使用此選項。 -
URL,在中開啟
您可以設定資產以開啟連結。 設定URL,然後在「開啟」中(在中)指出您要在相同視窗還是新視窗中開啟它。
如果您正在檢視影像集、回轉集或混合媒體集,則無法使用此選項。 -
寬度 和 高度
如果希望影像大小固定,請輸入像素值。 將這些值保留為空白,可讓資產具有適用性。
使用視訊時 when-working-with-video
使用Dynamic Media元件將動態視訊新增至網頁。 編輯元件時,您可以選擇使用預先定義的視訊檢視器預設集來在頁面上播放視訊。
您必須按一下「 」,編輯下列Dynamic Media設定 編輯 在元件中。
您可以編輯下列項目 進階設定 按一下 編輯 在元件中。
-
標題
變更視訊的標題。 -
寬度 和 高度
如果要視訊大小固定,請輸入像素值。 將這些值保留為空白,可使其變得最適化。
使用智慧型裁切時 when-working-with-smart-crop
使用Dynamic Media元件將智慧型裁切影像資產新增至網頁。 編輯元件時,您可以選擇使用預先定義的視訊檢視器預設集來在頁面上播放視訊。
另請參閱 影像設定檔.
您可以編輯下列項目 Dynamic Media設定 按一下 編輯 在元件中。
- 影像修飾元
通過提供其他影像命令,可以應用影像效果。 這些在「影像預設集」和「影像伺服命令」參考中有說明。
如果您正在檢視影像集、回轉集或混合媒體集,則無法使用此選項。
您可以編輯下列項目 進階 按一下 編輯 在元件中。
-
標題
變更智慧型裁切影像的標題。 -
替代文字
為已關閉圖形的使用者新增智慧型裁切影像標題。
如果您正在檢視影像集、回轉集或混合媒體集,則無法使用此選項。 -
URL,在中開啟
您可以設定資產以開啟連結。 設定URL,然後在「開啟」中(在中)指出您要在相同視窗還是新視窗中開啟它。
如果您正在檢視影像集、回轉集或混合媒體集,則無法使用此選項。 -
高度 和 寬度
如果您希望智慧型裁切影像的大小固定,請輸入像素值。 將這些值保留為空白,可使其變得最適化。
互動式媒體元件 interactive-media-component
互動式媒體元件適用於在這些資產上具有互動的熱點或影像地圖。 如果您有互動式影像、互動式視訊或輪播橫幅,請使用互動式媒體元件。
互動式媒體元件是智慧型的 — 根據您添加的影像還是視頻,您有各種選項。 此外,檢視器回應速度快 — 螢幕大小會根據螢幕大小自動變更。 所有檢視器均為HTML5檢視器。
您可以編輯下列項目 一般 按一下 編輯 在元件中。
-
檢視器預設集
從下拉式選單中選取現有的檢視器預設集。 如果您要尋找的檢視器預設集未顯示,您可能需要將其顯示。 必須先發佈檢視器預設集,才能使用。 請參閱管理檢視器預設集。 -
標題
變更視訊的標題。 -
寬度 和 高度
如果要視訊大小固定,請輸入像素值。 將這些值保留為空白,可使其變得最適化。
您可以編輯下列項目 添加到購物車 按一下 編輯 在元件中。
-
顯示產品資產
依預設,會選取此值。 產品資產會依照商務模組中的定義顯示產品的影像。 清除勾號以不顯示產品資產。 -
顯示產品價格
依預設,會選取此值。 產品價格顯示商務模組中定義的項目價格。 清除勾號以不顯示產品價格。 -
顯示產品表單
預設情況下,不會選取此值。 產品表單包含任何產品變體,例如大小和顏色。 清除勾號以不顯示產品變體。
全景媒體元件 panoramic-media-component
全景媒體元件用於那些為球形全景影像的資產。 這些影像提供360°的房間、屬性、位置或景觀的觀看體驗。 要使影像符合球形全景,它必須具有以下一個或兩個:
- 長寬比為2:1。
- 以關鍵字"equirectangual"或("spherical" + "panorama")或("spherical" + "panoramic")加上標籤。 請參閱 使用標籤.
外觀比例和關鍵字條件都適用於資產詳細資訊頁面和「全景媒體」WCM元件的全景資產。
您可以點選「 」,編輯下列設定 設定 在元件中。
- 檢視器預設集
從「檢視器預設集」下拉式選單中選取現有的檢視器。
如果您要尋找的檢視器預設集未顯示,請核取以確認其已發佈。 您必須先發佈檢視器預設集,才能使用它們。 請參閱 管理檢視器預設集.
使用HTTP/2傳送Dynamic Media資產 using-http-to-delivery-dynamic-media-assets
HTTP/2是全新、更新的Web通訊協定,可改善瀏覽器和伺服器的通訊方式。 它提供了更快的資訊傳輸,並降低了所需的處理能力。 Dynamic Media資產的傳送現在可透過HTTP/2,提供更理想的回應和載入時間。
請參閱 HTTP2內容傳送 如需開始使用HTTP/2搭配您的Dynamic Media帳戶的完整詳細資訊。