管理查看器預設

查看器預設是一組設定,用於確定用戶如何在其電腦螢幕和移動設備上查看富媒體資產。 如果您是管理員,則可以建立查看器預設。 設定可用於查看器配置選項的陣列。 例如,可以更改查看器顯示大小或縮放行為。

另請參閱 Dynamic Media觀眾參考指南

本節介紹如何建立、編輯和管理查看器預設。 您可以隨時將查看器預設應用於資產。 請參閱 應用查看器預設

注意

編輯任意 預定義的現成查看器預設 不是支援的方案。 如果嘗試編輯現成查看器預設,系統會提示您使用新名稱保存查看器預設。

查看器的鍵盤輔助功能

所有出廠設定查看器都支援鍵盤輔助功能。

另請參閱 鍵盤輔助功能和導航

管理查看器預設

通過導航到Adobe Experience Manager,可以添加、編輯、刪除、發佈、取消發佈和預覽查看器預設 工具 (錘子表徵圖)> 資產 > 查看器預設

6_5_tools-assets-viewer預設

注意

預設情況下,在資產的詳細資訊視圖中選擇「查看器」時,系統會顯示15個查看器預設。 您可以提高此限制。請參閱 增加顯示的查看器預設數

對響應性設計的網頁的查看器支援

不同的網頁有不同的需求。 例如,有時您需要一個提供連結的網頁,該連結在單獨的瀏覽器窗口中開啟HTML5查看器。 在其它情況下,需要將HTML5查看器直接嵌入到托管頁面。 在後一種情況下,網頁具有靜態佈局。 或者,它「響應」,在不同設備上或不同瀏覽器窗口大小時顯示不同。 為滿足這些需求,Dynamic Media隨附的所有預定義的開箱即用HTML5查看器都支援靜態網頁和響應性設計的網頁。

請參閱 響應靜態映像庫Dynamic Media影像服務和呈現API幫助 的子菜單。

注意

在首次使用所有現成查看器之前,先發佈所有現成查看器。
請參閱 發佈查看器預設

查看器預設系統相容性

Dynamic Media附帶的所有現成查看器預設都與以下系統完全相容:

  • 台式機
  • AppleiPhone
  • AppleiPad
  • Android™智慧手機
  • Android™平板電腦

查看器預設的富媒體類型

管理員在建立查看器預設時可以添加和自定義以下富媒體類型。

傳送集

熱點或影像映射,或兩者都添加到一系列兩個或多個影像中。 客戶可以向左或向右平移影像,然後在影像上選擇一個熱點,以瞭解更多詳細資訊或直接從網站的登錄、類別或首頁購買。

維度

顯示3D場景,讓您可以旋轉、平移、縮放或重新輸入相機。

彈出式縮放

在原始影像旁邊顯示縮放區域的第二影像。 沒有要使用的控制項 — 用戶將所選內容移到要查看的區域上。

確定此查看器的完整頻寬使用時,請考慮主影像和浮出影像都在查看器中提供。 主影像大小(階段寬度和高度)和縮放因子決定了飛出影像大小。 要防止浮出檔案大小變得過大,請平衡以下兩個值:如果主影像大小較大,請降低「縮放因子」值。 (「浮出寬度」(Flyout Width)和「浮出高度」(Flyout Height)確定浮出窗口的大小,但不確定提供給查看器的浮出影像的大小。)

例如,如果主影像大小為350 x 350像素,且「縮放因子」為3,則生成的浮出影像為1050 x 1050像素。 如果主影像大小為300 x 300像素,且「縮放因子」為4,則浮出影像為1200 x 1200像素。 根據JPEG質量設定(建議的設定介於80到90之間),您可以顯著減小檔案大小。 建議的縮放系數為2.5到4,具體取決於主影像的大小。

內聯縮放 顯示原始查看器中縮放區域的影像。 沒有可使用的控制項。 即,用戶將所選內容移到要查看的區域。
影像集 在「影像集」查看器中,用戶可以通過選擇縮略圖來查看項目的不同視圖或顏色變化。 此查看器還提供了用於仔細檢查影像的縮放工具。
互動影像 熱點會添加到影像的部分,然後客戶可以選擇這些部分以獲取更多詳細資訊或直接從網站的登錄、類別或首頁購買。
互動視訊 縮略圖會添加到視頻中的時間軸段,然後客戶可以選擇這些段以獲取更多詳細資訊或直接從網站的登錄頁、類別或首頁購買。
混合媒體 在一個查看器中顯示不同類型的媒體。 可以包括旋轉集、影像集、影像和視頻。
全景影像

全景影像和全景VR觀看器可呈現球形全景影像,讓用戶沈浸在360°的房間、房產、位置或景觀的觀看體驗中。

要將上載的影像限定為球形全景圖,它必須具有以下任一或兩者:

  • 寬高比為2:1。
  • 用關鍵字標籤 equirectangularsphericalpanoramaspherical panoramic。 請參閱 使用標籤

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

智慧型裁切視訊

使用此查看器可自動檢測並裁剪到任何視頻中的焦點。

迴轉集 提供影像的多個視圖,以便用戶可以旋轉對象以檢查不同的側面和角度。
360視頻

使用360/VR視頻查看器可以呈現等長形視頻,讓您在房間、房產、位置、景觀或醫療程式中體驗身臨其境的觀看體驗。

在平面顯示器上回放期間,用戶控制視角。 在移動設備上播放時使用其內置的陀螺控制。

觀眾包括對360個視頻資產的本機支援。 預設情況下,查看或回放不需要其他配置。 使用標準視頻擴展(如.mp4、.mkv和.mov)提供360視頻。 最常見的編解碼器是H.264。

影片

使用逐行或自適應比特率流播放視頻。 自適應比特率流自動執行設備和頻寬檢測以以適當的格式提供適當質量的視頻。

垂直縮放

「垂直縮放」查看器使您能夠最大限度地提高產品影像的查看體驗,從而為用戶提供產品的最佳表現。 色板的垂直位置執行以下操作:

  • 確保色板「位於折線上方」。
    使用水準色板(取決於用戶的案頭螢幕大小),在用戶向下滾動頁面之前,色板不可見。 通過將色板垂直放置在查看器中,它可確保無論用戶的螢幕大小如何都可見。
  • 最大化主映像大小。
    使用水準色板,必須在頁面上保留空間,以確保它們可見。 此定位縮小了主影像的大小。 但是,使用垂直色板佈局時,不需要分配此空間。 因此,可以最大化主影像大小。
縮放 允許用戶通過選擇區域來放大區域。 用戶可以選擇控制項以放大、縮小影像並將影像重置為其預設大小。

現成查看器預設清單

下表標識了隨Dynamic Media提供的所有預定義的現成查看器預設。

另請參閱 現場演示

有關Viewer支援的Web瀏覽器和作業系統版本的資訊,可以查看Viewers發行說明。

請參閱目錄中的「查看器發行說明」 查看器參考指南

注意

Dynamic Media的所有現成查看器預設都已激活(開啟),但必須發佈這些預設。
請參閱 發佈查看器預設

您建立和添加的任何新查看器預設必須同時激活已發佈。
請參閱 激活或停用查看器預設發佈查看器預設

查看器預設標題 類型 CSS 檔案名稱
旋轉軸虛線深色 旋轉軸集 html5_carouselviewer_dotted_dark.css
旋轉軸點光 旋轉軸集 html5_carouselviewer_dotted_light.css
旋轉軸_數字_暗 旋轉軸集 html5_carouselviewer_numeric_dark.css
旋轉軸_數字_光 旋轉軸集 html5_carouselviewer_numeric_light.css
飛出 浮動(_Z) html5_flyoutviewer.css
影像集(_D) 影像集 html5_zoomviewer_dark.css
ImageSet_light 影像集 html5_zoomviewer_light.css
InlineMixedMedia_dark 混合媒體 html5_inlinemixedmediaviewer_dark.css
InlineMixedMedia_light 混合媒體 html5_inlinemixedmediaviewer_light.css
內聯縮放 浮動(_Z) html5_inlinezoomviewer.css
混合媒體_dark 混合媒體 html5_mixedmediaviewer_dark.css
混合媒體_light 混合媒體 html5_mixedmediaviewer_light.css
全景影像 全景影像 html5_panoramicimage.css
全景影像VR 全景影像 html5_panoramicimage.css
可購物橫幅 互動式影像 html5_interactiveimage.css
可購物_視頻_暗 互動式視頻 html5_interactivevideoviewer_dark.css
可購物視頻輕 互動式視頻 html5_interactivevideovewer_light.css
自旋集_dark 旋轉集 html5_spinviewer_dark.css
旋轉集_light 旋轉集 html5_spinviewer_light.css

影片

(包括對字幕的支援)

影片 html5_videoviewer.css

Video360_social

(包括基本視頻播放控制項,視頻渲染以立體模式完成,手動視點控制項關閉,但陀螺儀控制項開啟,且沒有社交媒體功能)

視頻_360 html5_video360viewersocial.css

Video360VR

(專為使用虛擬現實眼鏡的最終用戶設計。 包括基本視頻播放控制項和社交媒體功能)

視頻_360 html5_video360viewer.css

視頻_社交

(包括對字幕和社交媒體的支援)

影片 html5_videoviewersocial.css
縮放(_D)
縮放
html5_basiczoomviewer_dark.css
縮放(_L)
縮放 html5_basiczoomviewer_light.css
縮放垂直深暗
垂直縮放 html5_zoomverticalviewer_dark.css
縮放垂直光 垂直縮放 html5_zoomverticalviewer_light.css

支援的移動觀眾手勢矩陣

下表列出了iOS、Android™ 2.x和Android™ 3.x設備支援的移動查看器手勢。

手勢 彈出式縮放 縮放 迴轉

拖動

點擊

顯示彈出窗口

顯示或隱藏用戶介面

顯示或隱藏用戶介面

按兩下

不適用

放大或重置

放大或重置

捏開

不適用

放大(僅限iOS和Android™ 3x)

放大(僅限iOS和Android™ 3x)

捏合閉合

不適用

放大(僅限iOS和Android™ 3x)

放大(僅限iOS和Android™ 3x)

撥動

滾動色板條

滾動影像

自旋

弗利克

滾動色板條

滾動影像

自旋

增加顯示的查看器預設數

Experience Manager在從中查看資產時顯示多種查看器預設 詳細資訊視圖 > 查看者。 可以增加或減少顯示的查看器數。

要增加顯示的查看器預設數:

  1. 導航到CRXDE Lite(https://localhost:4502/crx/de)。

  2. 導航到位於的查看器預設清單節點 /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist

    chlimage_1-221

  3. limit 屬性中,將預設設 ​定為15的值變更為所要的數字。

  4. 導航到位於的查看器預設資料源 /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource

    chlimage_1-222

  5. 在limit屬性中,將數字更改為所需的數字,例如 {empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}

  6. 選擇 全部保存

建立查看器預設

建立查看器預設允許您應用各種設定來查看和與資產交互。 但是,您不需要建立查看器預設。 如果您願意,可以使用已隨Experience Manager Assets附帶的預設現成查看器預設。

如果選擇建立查看器預設,則在保存後,將自動激活查看器的狀態(設定為 )。 此狀態表示在Dynamic Media元件和互動式媒體元件中以及在您預覽影像或視頻時都可看到它。

某些查看器預設具有排他性設定,這些設定可能影響查看器的使用和整體行為。 根據您建立的查看器預設,您需要瞭解這些特殊注意事項。

請參閱 建立互動式查看器預設的特殊注意事項

請參閱 建立Carousel Banner Viewer預設的特殊注意事項

要建立查看器預設:

  1. 在Experience Manager的左上角,選擇Experience Manager徽標,然後在左滑軌中,轉到 工具 (錘子表徵圖)> 資產 > 查看器預設

    6_5視圖預設

  2. 在「查看器預設」頁面的工具欄上,選擇 建立

  3. 新建查看器預設 對話框 預設名稱 欄位,輸入新預設的名稱。 仔細選擇名稱 — 在選擇後,這些名稱不可編輯 建立

    稍後在這些步驟中保存預設時,該名稱將顯示在「查看器預設」頁面的「預設標題」列標題下。

  4. 在「富媒體類型」下拉菜單中,選擇要建立的查看器預設的類型,然後在頁面右上角選擇 建立

    請參閱 查看器預設的富媒體類型

  5. 在「查看器預設編輯器」頁面上,選擇 外觀 頁籤。

  6. 執行下列操作之一:

    • 所選類型 下拉菜單,選擇要自定義其可視設計的元件。 或者,可以在查看器中選擇任何可視元素以將其選中進行配置。

      可視編輯器允許您查看某個屬性對樣式有何影響。 設定或調整任何屬性,以便使用編輯器左側的示例立即查看它對查看器的影響。

      「定制」中介紹了每種類型的查看器預設的CSS樣式屬性 <viewer name> 查看器中的幫助主題 查看器參考指南。 例如,如果要建立類型的查看器預設 Mixed_Media,請參閱 自定義混合媒體查看器 的子菜單。

    • 如果在單獨的CSS檔案中定義了樣式設定,則可以將CSS檔案上載到Experience Manager Assets。 要查找上載的CSS檔案並將其與查看器預設關聯,請選擇 導入CSS 下方 所選類型 下拉菜單(如有必要,向上滾動可視編輯器以查看它)。

      導入CSS檔案時,可視編輯器會檢查CSS是否使用了正確的查看器標籤。 例如,如果要建立縮放查看器,則必須使用其查看器類名定義導入的所有CSS規則 .s7mixedmediaviewer 在父查看器元素上定義。

      只要正確定義給定查看器的CSS標籤,就可以導入任意手工CSS。 (CSS標籤在任何「自定義」 <viewer name=""> 查看器中的幫助主題 查看器參考指南。 例如,如果要閱讀有關縮放查看器的CSS標籤,請參見 自定義縮放查看器。) 但是,可視編輯器可能不理解某些CSS值。 在這種情況下,可視編輯器會嘗試覆蓋錯誤,以便CSS仍能工作。

    注意

    如果希望直接以原始格式編輯CSS,請選擇 顯示/隱藏CSS 在「選定類型」下拉菜單下(如有必要,向上滾動可視編輯器以查看它)。
    與可視編輯器一樣,當您直接在CSS中更改屬性時,您可以立即查看它對查看器示例的影響。 而且,同一屬性會在可視編輯器中同時自動更新。 因此,您可以使用原始CSS編輯器或可視編輯器,或者兩者交替使用。

    注意

    對於按鈕圖稿,選擇2x影像並上傳高解析度藝術作品。 使用互動式影像和可購物的橫幅時,您還可以從各種現成熱點按鈕中進行選擇。

  7. (可選)在「編輯查看器預設」頁面頂部附近,選擇 案頭平板電腦​或 電話 以為不同的設備和螢幕類型唯一定義可視樣式。

  8. 在「查看器預設編輯器」頁面上,選擇 行為 頁籤。 或者,可以在查看器中選擇任何可視元素以將其選中進行配置。

  9. 從「選 定類型 」(Selected Type)下拉菜單中,選擇要更改其行為的元件。

    可視編輯器中的許多元件都有與其關聯的詳細說明。 展開元件以顯示其關聯參數時,這些說明會顯示在藍色框中。

    有些檢視器類型具有可讓您在「 IS Command」 (IS命令) 文字欄位中指定「Image Serving 」 (影像伺服) 命令的元件。如需您可使用的指令清單,請參 閱影像伺服API參考

    注意

    如果你在使用觸摸設備,如電話或平板電腦……

    在文本欄位中鍵入值後,請在用戶介面的其他位置選擇以提交更改並關閉虛擬鍵盤。 如果選擇 輸入,不執行任何操作。

  10. 在頁面右上角附近,選擇 保存

  11. 發佈新查看器預設。 必須先發佈預設,然後才能在您的網站上使用它。

    請參閱 發佈查看器預設

建立互動式查看器預設的特殊注意事項

關於面板中影像縮略圖的顯示模式:

建立或編輯互動式視頻查看器預設時,可以選擇使用哪種「顯示模式」設定。 當您選擇 InteractiveSwatches所選元件 下面的下拉菜單 行為 頁籤。 您選擇的「顯示」模式會影響縮圖在視訊播放時的顯示方式和時間。您可以選擇「顯 segment示」模式 (預設) 或「顯 continuous 示」模式。

顯示模式 說明
區段

Segment 是現成Interactive Video Viewer預設的預設顯示模式 Shoppable_Video_lightShoppable_Video_dark 以及您自己建立的任何Interactive Video Viewer預設。

在此模式下,假設分配給視頻段的縮略圖數少於顯示面板中可見點數。 在這種情況下,下一個或上一個子段的縮略圖 拉進來填充面板中的空點。 即,它保留分配給特定視頻段的色板的顯示。

連續

continuous 顯示模式,假設段中縮略圖的數量小於面板中可見的數量。 在這種情況下,查看器自動包括顯示下一段或上一段的縮略圖,其中顯示最後一段縮略圖。

本主題的視頻continuous 顯示模式。

關於互動式視頻查看器中的自動滾動行為:

交互視頻查看器中縮略圖的自動滾動行為與所選顯示模式無關。

當您建立或編輯互動式視訊檢視器預設集時,可從「行為」標籤存取「自動捲動」。在「行為」(Behavior)頁籤中, 所選元件 下拉菜單,選擇 交互色板。 「自動捲動」(Auto Scroll)複選框列在「IS命令」(IS Command)文本欄位下。

如果您在檢視器預設集中停用「自動捲動 ​」 (清除核取方塊),當使用者播放視訊時,面板只會顯示整個視訊長度的第一個縮圖影像。不過,使用者可視需要使用向上和向下箭頭圖示手動捲動縮圖。

當您在檢視器預設集中啟用 (選取) 「自動捲動 ​」時,在視訊播放期間,指派給視訊區段的縮圖影像會在區段開始時捲動至檢視中。但是,有些例項會顯示區段中某些縮圖的長度,是其前後縮圖的兩倍。發生此行為是因為區段中的縮圖數目大於面板中顯示的數目,且不可平均分割。

為了說明問題,假設您有一個30秒的視頻段。 在30秒內總共有9個縮略圖要顯示。 您的瀏覽器的大小決定了在顯示面板中有四個可見縮略圖位置。 30秒視頻時間段分為三個子段。 下表顯示了給定時間子段顯示縮略圖的細目:

視頻子段 子段時間(秒) 在面板中可見的縮略圖
1 0-10 1、2、3、4
2 十至二十 4、5、6、7
3 20-30 6、7、8、9

視頻子段3不會擴展到分配給它的縮略圖之外。 另請注意,縮略圖4、6和7在面板中的可見時間是其他縮略圖的兩倍。

查看器根據可用位置的數量在面板中顯示多少縮略圖所使用的邏輯如下:

  • 子段數=向上捨入到下一個子段(縮略圖數/縮略圖面板中可見插槽數,基於瀏覽器窗口大小)。
    使用上表中的示例,9個縮略圖/4個插槽= 2.25;查看器邏輯將其捨入為三個子段。

  • 縮略圖數=向上捨入到下一個縮略圖(縮略圖數/視頻子段數)。
    使用上表中的示例,9個縮略圖/3個視頻子段= 3個縮略圖。

  • 子段的持續時間=總視頻持續時間/視頻子段數。
    使用上表中的示例, 30秒/ 3個視頻子段=每個視頻子段的10秒顯示。

建立Carousel Banner查看器預設時,可以按如下方式訪問更改熱點的樣式:

說明 動作
熱點表徵圖 更改用於熱點的表徵圖 要更改熱點表徵圖影像,請在 外觀所選元件​選中 影像映射效果。 下 表徵圖​選中 背景影像 欄位導航到所需的背景影像。

激活或停用查看器預設

用戶介面中可用的查看器預設取決於在「作者」模式下哪些預設處於活動狀態。 預設情況下,建立查看器預設後,該預設為「開啟」。 如果關閉預設,則在「作者」模式下看不到預設。 如果發佈預設,則無論其是開啟還是關閉,都始終發佈預設。 如果清單變得太笨重,或者您不希望讓查看器預設可用,則停用查看器預設。

要激活或停用查看器預設,請執行以下操作:

  1. 在Experience Manager的左上角,選擇Experience Manager徽標,然後在左滑軌中,選擇 工具 (錘子表徵圖)> 資產 > 查看器預設

  2. 在「查看器預設」頁面上,在 列標題,選擇切換以激活或停用查看器預設。

    激活的查看器預設使切換出現在藍色框的右側;停用的查看器預設使切換出現在左側,位於淺灰色框內。

發佈查看器預設

激活(或開啟「開啟」)查看器預設狀態意味著它在Dynamic Media元件、互動式媒體元件中以及在您查看資產時都可見。

但是, 具有查看器預設的資產,也必須發佈查看器預設。 必須激活所有查看器預設 已發佈以獲取資產的URL或嵌入代碼。 激活並發佈隨Dynamic Media提供的所有現成查看器預設。 您建立和新增的自訂檢視器預設集會自動啟動,但也必須發佈。

請參閱 激活或停用查看器預設

另請參閱 預覽資產

要發佈查看器預設:

  1. 在Experience Manager的左上角,選擇Experience Manager徽標,然後在左滑軌中,選擇 工具 (錘子表徵圖)> 資產 > 查看器預設
  2. 選擇要發佈的一個或多個查看器預設。
  3. 在工具欄上,選擇 發佈 表徵圖

對查看器預設排序

  1. 在Experience Manager的左上角,選擇Experience Manager徽標,然後在左滑軌中,選擇 工具 (錘子表徵圖)> 資產 > 查看器預設
  2. 選擇 預設標題類型已發佈​或 按列標題排序。 例如,選擇 類型 按字母順序或反字母順序對查看器預設類型進行排序。

編輯查看器預設

編輯任意 預定義的現成查看器預設 不是支援的方案。 如果編輯現成查看器預設,系統將提示您使用新名稱保存。

要編輯查看器預設:

  1. 在Experience Manager的左上角,選擇Experience Manager徽標,然後在左滑軌中,選擇 工具 (錘子表徵圖)> 資產 > 查看器預設

  2. 通過選中查看器預設標題左側的框來選擇預設。

  3. 在工具欄上,選擇 編輯

  4. 查看器預設編輯器 的子菜單。 外觀行為 頁籤。

    外觀 頁籤,在「查看器預設編輯器」頁的左上角附近,選擇 案頭平板電腦​或 電話 的子菜單。

  5. 在頁面的右上角,執行下列操作之一:

    • 選擇 保存 以保存更改並返回「查看器預設」頁。
    • 選擇 取消 撤消您所做的任何更改並返回到「查看器預設」頁。

刪除自定義查看器預設

您可以刪除已建立並添加到Dynamic Media的查看器預設。

要刪除自定義查看器預設,請執行以下操作:

  1. 在Experience Manager的左上角,選擇Experience Manager徽標,然後在左滑軌中,選擇 工具 (錘子表徵圖)> 資產 > 查看器預設
  2. 在「查看器預設」頁面上,選中「預設標題」,然後選擇 垃圾 表徵圖
  3. 選擇 刪除

將查看器預設應用於資產

如果您已發佈資產和選取的檢視器, URLEmbed (內嵌) 按鈕會在您選取檢視器預設集後顯示。

要將查看器預設應用於資產:

  1. 開啟資產並靠近頁面左上角,選擇下拉菜單,然後選擇 查看者

    注意

    如果您已發佈資產和選取的檢視器, URLEmbed (內嵌) 按鈕會在您選取檢視器預設集後顯示。

  2. 要將其應用於資產,請從左窗格中選擇一個查看器預設。

    你可以 複製要共用的URL 與其他用戶。

使用查看器預設交付資產

要獲取查看器預設的URL,請參見 將URL連結到Web應用程式。 另請參閱 將視頻查看器嵌入網頁

如果將Experience Manager用作WCM,則可以使用頁面上的查看器預設直接添加資產。 請參閱 將Dynamic Media資產添加到頁面

本頁內容