「檢視器預設集」是一組設定,可決定使用者在電腦畫面和行動裝置上檢視多媒體資產的方式。 如果您是管理員,可以建立檢視器預設集。 設定適用於檢視器組態選項的陣列。 例如,您可以變更檢視器的顯示大小或縮放行為。
如需建立和自訂您自己的HTML5檢視器預設集的指示,請參閱AdobeDynamic Media HTML5檢視器SDK API檔案。 SDK可在內嵌於SDK本身的IS發佈伺服器上使用。 每個程式庫版本都有其專屬的SDK檔案。
路徑: <scene7_domain>/s7sdk/<library_version>/docs/jsdocs/index.html
.
例如3.10 SDK:https://s7d1.scene7.com/s7sdk/3.10/docs/jsdoc/index.html
另請參閱AdobeDynamic Media檢視器參考指南。
本節說明如何建立、編輯和管理檢視器預設集。 您隨時可以預覽資產,將檢視器預設集套用至資產。 請參閱套用檢視器預設集。
不支援編輯任何預先定義的現成可用檢視器預設集*。*如果您嘗試編輯現成可用的檢視器預設集,系統會提示您使用新名稱儲存檢視器預設集。
所有現成可用的檢視器都支援鍵盤協助工具。
另請參閱鍵盤輔助功能和導航。
您可以點選「工具(槌子圖示)> 資產 > 檢視器預設集」,在Adobe Experience Manager中新增、編輯、刪除、發佈、取消發佈和預覽檢視器預設集。
依預設,當您在資產的詳細資訊檢視中選取「檢視器」時,系統會顯示15個檢視器預設集。 您可以提高此限制。請參 閱增加顯示的檢視器預設集數目。
不同的網頁有不同的需求。 例如,有時您會想要的網頁提供連結,可在個別瀏覽器視窗中開啟HTML5檢視器。 在其他情況下,可能需要直接將HTML5檢視器內嵌在托管頁面上。 在後一種情況下,網頁可以具有靜態佈局。 或者,它可能是「回應式」,且在不同裝置上或針對不同瀏覽器視窗大小顯示不同。 為符合這些需求,Dynamic Media隨附的所有預先定義且立即可用的HTML5檢視器,都支援靜態網頁和回應式設計網頁。
如需如何將回應式檢視器內嵌至網頁的詳細資訊,請參閱回應式影像庫。
請注意,您必須先發佈所有現成可用的檢視器,才能首次使用。
請參閱[發佈檢視器預設集]。(#publishing-viewer-presets)
Dynamic Media隨附的所有現成可用的檢視器預設集都與下列系統完全相容:
管理員在建立檢視器預設集時,可新增及自訂下列多媒體類型。
傳送集 |
熱點(或影像映射)或兩者都添加到一系列兩個或多個影像中。 客戶可以向左或向右平移影像,然後在影像上選取熱點以取得其他詳細資訊,或直接從網站的類別、首頁或登陸頁面購買。 |
維度 |
顯示3D場景,可讓您轉動、平移、縮放或重新進入相機。 |
彈出式縮放 | 在原始影像旁邊顯示縮放區域的第二個影像。 沒有可使用的控制項 — 用戶將選區移動到要查看的區域上。 在確定此檢視器的完整頻寬使用時,請考慮在檢視器中同時提供主影像和彈出影像。 主影像大小(階段寬度和高度)和縮放因子決定彈出影像的大小。 若要避免彈出檔案大小過大,請平衡以下兩個值:如果主影像大小很大,請降低「縮放因子」值。 (「飛出寬度」和「飛出高度」決定飛出視窗的大小,但不決定提供給檢視器的飛出影像的大小。) 例如,如果您的主影像大小是350 x 350像素,而縮放因子是3,則產生的彈出影像是1050 x 1050像素。 如果您的主影像大小是300 x 300像素,而縮放系數是4,則彈出影像是1200 x 1200像素。 根據JPEG品質設定(建議的設定介於80到90之間),您可以大幅減小檔案大小。 建議的縮放因子為2.5到4,視主影像的大小而定。 |
內嵌縮放 | 顯示原始查看器內縮放區域的影像。 沒有可使用的控制項。 也就是說,使用者會將選取項目移至要檢視的區域上。 |
影像集 | 在「影像集」檢視器中,使用者可以選取縮圖影像,以查看項目的不同檢視或顏色變化。 此檢視器也提供縮放工具,供您仔細檢查影像。 |
互動影像 | 熱點會新增到影像的某些部分,然後客戶可以選擇這些部分以獲取其他詳細資訊或直接從網站的類別、首頁或登錄頁購買。 |
互動視訊 | 縮圖會新增至影片中的時間軸區段,客戶可以選取該區段以取得其他詳細資料,或直接從網站的類別、首頁或登陸頁面購買。 |
混合媒體 | 在一個檢視器中顯示不同類型的媒體。 您可以包含回轉集、影像集、影像和視訊。 |
全景影像 | 全景影像和全景VR檢視器會轉譯球形全景影像,讓使用者沈浸於房間、屬性、位置或橫向的360°檢視體驗中。 上傳的影像若要符合球形全景,必須具備下列其中一項或兩項:
外觀比例和關鍵字條件都適用於資產詳細資訊頁面和「全景媒體」WCM元件的全景資產。 重要:此檢視器僅適用於Dynamic Media - Scene7模式。 |
智慧型裁切視訊 |
使用此查看器可自動檢測任何視頻中的焦點,並裁切到焦點。 |
迴轉集 | 提供影像的多個視圖,以便用戶可以旋轉對象來檢查不同的邊和角度。 |
360段視頻 | 使用360/VR視訊檢視器來呈現等方形視訊,以提供房間、屬性、位置、景觀或醫療程式的沈浸式檢視體驗。 在平面顯示器上播放期間,使用者可控制觀看角度;行動裝置上的播放通常會套用其內建的陀螺控制項。 檢視器包含360個視訊資產的原生支援。 依預設,檢視或播放不需要其他設定。 您使用標準視訊副檔名(例如.mp4、.mkv和.mov)來傳送360視訊。 最常見的編解碼器為H.264。 重要:此檢視器僅適用於Dynamic Media - Scene7模式。 |
影片 | 使用漸進式或最適化位元速率串流播放視訊。 自適應位元速率串流會自動執行裝置和頻寬偵測,以適當格式提供適當品質的視訊。 |
垂直縮放 | 垂直縮放檢視器可讓您最大化產品影像檢視體驗,讓使用者能以最佳方式呈現產品。 色票的垂直位置會執行下列操作:
|
縮放 | 讓使用者透過選取區域來放大。 使用者可以選取控制項來放大、縮小,以及將影像重設為其預設大小。 |
下表識別Dynamic Media隨附的所有預先定義且現成的檢視器預設集。
另請參閱即時演示。
如需支援的網頁瀏覽器和檢視器作業系統版本的相關資訊,您可以檢閱檢視器發行說明。
請參閱檢視器參考指南目錄中的「檢視器發行說明」。
Dynamic Media中所有現成可用的檢視器預設集皆已啟動(開啟),但您必須發佈。
請參閱發佈檢視器預設集。
您建立和新增的任何新檢視器預設集都必須同時啟動和已發佈。
請參閱啟用或停用檢視器預設集和發佈檢視器預設集。
檢視器預設集標題 | 類型 | CSS 檔案名稱 |
輪播_虛線_深色 | 輪播集(_S) | html5_carouselviewer_dotted_dark.css |
輪播_虛線_淺 | 輪播集(_S) | html5_carouselviewer_dotted_light.css |
轉盤_數值_深 | 輪播集(_S) | html5_carouselviewer_numeric_dark.css |
輪播_數值_light | 輪播集(_S) | html5_carouselviewer_numeric_light.css |
維度 | 維度 | html5_dimensionalviewer.css |
飛出 | 飛出_縮放 | html5_flyoutviewer.css |
ImageSet_dark | 影像集 | html5_zoomviewer_dark.css |
ImageSet_light | 影像集 | html5_zoomviewer_light.css |
InlineMixedMedia_dark | Mixed_Media | html5_inlinemixedmediaviewer_dark.css |
InlineMixedMedia_light | Mixed_Media | html5_inlinemixedmediaviewer_light.css |
InlineZoom | 飛出_縮放 | html5_inlinezoomviewer.css |
MixedMedia_dark | Mixed_Media | html5_mixedmediaviewer_dark.css |
MixedMedia_light | Mixed_Media | html5_mixedmediaviewer_light.css |
全景影像 | 全景影像 | html5_panoramicimage.css |
全景影像VR | 全景影像 | html5_panoramicimage.css |
Shopbable_Banner | Interactive_Image | html5_interactiveimage.css |
Shopbable_Video_dark | Interactive_Video | html5_interactivevideoviewer_dark.css |
Shopbable_Video_light | Interactive_Video | html5_interactivevideovewer_light.css |
SmartCropVideo | Smart_Crop_Video | html5_smartcropvideoviewer.css |
SmartCropVideo_social | Smart_Crop_Video | html5_smartcropvideoviewersocial.css |
回轉集深 | 回轉集(_S) | html5_spinviewer_dark.css |
回轉集光源 | 回轉集(_S) | html5_spinviewer_light.css |
影片 (包括對隱藏式字幕的支援) |
影片 | html5_videoviewer.css |
Video360_social (包括基本視訊播放控制項、以立體視訊模式進行視訊轉譯、關閉手動視點控制項但開啟陀螺儀控制項,且沒有社交媒體功能) |
Video_360 | html5_video360viewersocial.css |
Video360VR (專為使用虛擬現實眼鏡的最終用戶而設計。 包含基本視訊播放控制項和社交媒體功能) |
Video_360 | html5_video360viewer.css |
Video_social (包括對隱藏式字幕和社交媒體的支援) |
影片 | html5_videoviewersocial.css |
Zoom_dark |
縮放 |
html5_basiczoomviewer_dark.css |
Zoom_light |
縮放 | html5_basiczoomviewer_light.css |
ZoomVertical_dark |
垂直縮放 | html5_zoomverticalviewer_dark.css |
ZoomVertical_light | 垂直縮放 | 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從Detail View > Viewers檢視資產時,會顯示各種檢視器預設集。 您可以增加或減少顯示的檢視器數量。
增加顯示的檢視器預設集數目:
導覽至CRXDE Lite(https://localhost:4502/crx/de)。
在以下位置導覽至檢視器預設集清單節點:
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist
在 limit 屬性中,將預設設 定為15的值變更為所要的數字。
導覽至/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource
的檢視器預設集資料來源
在limit屬性中,將數字變更為所需數字,例如{empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}
選擇保存全部。
建立檢視器預設集可讓您套用各種設定,以檢視資產並與資產互動。 不過,您不需要建立檢視器預設集。 您也可以使用AEM Assets隨附的預設現成檢視器預設集。
如果您選擇建立檢視器預設集,儲存後,檢視器的狀態會在「檢視器預設集」頁面中自動啟動(設為On)。 此狀態表示在Dynamic Media元件和互動式媒體元件中,以及您預覽影像或視訊時,都可看到它。
某些檢視器預設集具有排他性設定,這些設定可能會影響檢視器的使用和整體行為。 視您建立的檢視器預設集而定,您可能會想要知道這些特殊考量。
若要建立檢視器預設集:
在Experience Manager的左上角,選取Experience Manager標誌,然後在左側導軌中,選取「工具(槌子圖示)> 資產 > 檢視器預設集」。
在「查看器預設集」頁的工具欄上,選擇Create。
在「新建查看器預設集」對話框的「預設集名稱」欄位中,輸入新預設集的名稱。請謹慎選擇名稱 — 在選擇Create後,這些名稱將無法編輯。
稍後在這些步驟中儲存預設時,名稱會出現在「預設集標題」欄標題下的「檢視器預設集」頁面上。
在「豐富型媒體類型」下拉式選單中,選取您要建立的檢視器預設集類型,然後在頁面的右上角,選取「建立」。
請參閱檢視器預設集的多媒體類型。
在「查看器預設集編輯器」頁面上,選擇Appearance頁簽。
執行下列任一操作:
在Selected Type下拉菜單中,選擇要自定義其視覺設計的元件。 或者,您也可以在檢視器中選取任何視覺元素,以選取它進行設定。
視覺編輯器可讓您查看特定屬性對樣式有何影響。 使用編輯器左側的範例,設定或調整任何屬性以立即查看其對檢視器有何影響。
檢視器參考指南中的「自訂<viewer name>
檢視器」說明主題中說明每種檢視器預設集類型的CSS樣式屬性。 例如,如果您要建立Mixed_Media
類型的檢視器預設集,請參閱自訂混合媒體檢視器以取得每個屬性的清單和說明。
如果您已在個別的CSS檔案中定義樣式設定,則可將CSS檔案上傳至AEM Assets。 在Selected Type下拉式選單下方選取Import CSS(如有必要,請向上捲動視覺編輯器以查看它),這樣您就可以找到上傳的CSS檔案,並將它與檢視器預設集建立關聯。
當您匯入CSS檔案時,視覺編輯器會檢查CSS是否使用正確的檢視器標籤。 例如,如果要建立縮放查看器,則您導入的所有CSS規則必須使用其父級查看器元素上定義的查看器類名稱.s7mixedmediaviewer
來定義。
只要正確定義指定檢視器的CSS標籤,您就可以匯入任意的手工CSS。 (CSS標籤會說明在檢視器參考指南的任何「自訂<檢視器名稱>檢視器」說明主題中。 例如,如果您想要閱讀縮放檢視器的CSS標籤,請參閱自訂縮放檢視器。) 不過,視覺編輯器可能不了解某些CSS值。 在這種情況下,視覺編輯器會嘗試覆寫錯誤,讓CSS仍可運作。
如果您偏好直接以原始格式編輯CSS,請選取「選取類型」下拉式選單下方的「顯示/隱藏CSS 」(如有需要,請向上捲動視覺編輯器以查看)。
如同視覺編輯器,當您直接在CSS中變更屬性時,您會立即看到它對檢視器範例有何影響。 而且,同一屬性會在視覺編輯器中同時自動更新。 因此,您可以使用原始CSS編輯器或視覺編輯器,或兩者可交互使用。
對於按鈕圖稿,請選擇2x影像並上傳高解析度的圖稿。 使用互動式影像和可購買的橫幅時,您也可以從各種現成可用的熱點按鈕中選取。
(可選)在「編輯檢視器預設集」頁面頂端附近,選取Desktop、Tablet或Phone,以針對不同的裝置和螢幕類型唯一定義視覺樣式。
在「檢視器預設集編輯器」頁面上,選取「Behavior」標籤。 或者,您也可以在檢視器中選取任何視覺元素,以選取它進行設定。
從「選 定類型 」(Selected Type)下拉菜單中,選擇要更改其行為的元件。
可視化編輯器中的許多元件都有與其相關聯的詳細說明。 展開元件以顯示其相關參數時,這些說明會顯示在藍色方塊中。
有些檢視器類型具有可讓您在「 IS Command」 (IS命令) 文字欄位中指定「Image Serving 」 (影像伺服) 命令的元件。如需您可使用的指令清單,請參 閱影像伺服API參考。
如果您使用觸控裝置,例如手機或平板電腦……
在文字欄位中輸入值後,請在使用者介面的其他位置選取以提交變更並關閉虛擬鍵盤。 如果選擇Enter,則不會執行任何操作。
在頁面的右上角附近,選擇Save。
發佈新的檢視器預設集,以便在網站上使用。
請參閱發佈檢視器預設集。
關於面板中影像縮圖的顯示模式
當您建立或編輯互動式視訊檢視器預設集時,可以選擇在Behavior標籤下的Selected Component選單中選取InteractiveSwatches
時要使用的顯示模式設定。 您選擇的顯示模式會影響縮圖在視訊播放時的顯示方式和時間。 您可以選擇segment
顯示模式(預設)或continuous
顯示模式。
顯示模式 | 說明 |
區段 |
在此模式中,當指派給視訊區段的縮圖數少於顯示面板中的可見點數時。 此外,下一個或上一個子區段的縮圖會被提取而非,以填入面板中的任何空白點。 也就是說,它會保留指派給特定視訊區段的色票顯示。 |
連續 | 在 |
關於互動式視訊檢視器中的自動捲動行為
互動式視訊檢視器中縮圖的自動捲動行為可獨立於您選擇的顯示模式運作。
當您建立或編輯互動式視訊檢視器預設集時,可從「行為」標籤存取「自動捲動」。在「行為」頁簽中,從Selected Components下拉菜單中,選擇InteractiveSwatches。 「自動捲動」(Auto Scroll)複選框列在「IS命令」(IS Command)文本欄位下。
如果您在檢視器預設集中停用「自動捲動 」 (清除核取方塊),當使用者播放視訊時,面板只會顯示整個視訊長度的第一個縮圖影像。不過,使用者可視需要使用向上和向下箭頭圖示手動捲動縮圖。
當您在檢視器預設集中啟用 (選取) 「自動捲動 」時,在視訊播放期間,指派給視訊區段的縮圖影像會在區段開始時捲動至檢視中。但是,有些例項會顯示區段中某些縮圖的長度,是其前後縮圖的兩倍。發生此行為是因為區段中的縮圖數目大於面板中顯示的數目,且不可平均分割。
為了說明,假設您有一個30秒的視訊區段。 30秒內總共會顯示9個縮圖。 您的瀏覽器的大小調整為顯示面板中有四個可見的縮圖位置。 30秒的視訊時間區段分為三個子區段。 下表顯示指定時間子區段顯示縮圖的劃分:
視訊子區段 | 子區段時間(以秒為單位) | 面板中可見的縮圖 |
---|---|---|
1 | 0-10 | 1, 2, 3, 4 |
2 | 10-20 | 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秒顯示。
建立轉盤橫幅檢視器預設集時,可依下列方式存取變更熱點的樣式:
說明 | 動作 | |
---|---|---|
熱點表徵圖 | 更改用於熱點的表徵圖 | 要更改熱點表徵圖影像,請在Appearance頁簽的Selected Component中,選擇ImageMapEffect。 在Icon下,選擇Background,然後在Image欄位中導覽至您想要的背景影像。 |
使用者介面中可用的檢視器預設集,取決於哪些檢視器預設集在「製作」模式中處於作用中狀態。 依預設,建立檢視器預設集後會「開啟」。 如果您關閉預設集,在「製作」模式中不會看見。 如果已發佈預設集,則無論其是開啟還是關閉,都一律會發佈。 如果清單變得太龐雜,或您不想讓檢視器預設集可供使用,您可以停用檢視器預設集。
要激活或停用查看器預設集,請執行以下操作:
在Experience Manager的左上角,選取Experience Manager標誌,然後在左側導軌中,選取「工具(槌子圖示)> 資產 > 檢視器預設集」。
在「檢視器預設集」頁面的State欄標題下,選取切換以啟用或停用檢視器預設集。
已啟動的檢視器預設集會讓切換按鈕顯示在右側、藍色方塊內;停用的檢視器預設集會讓切換按鈕顯示在左側的淺灰色方塊內。
啟用(或開啟「開啟」)檢視器預設集的狀態,表示它可在Dynamic Media元件、互動式媒體元件以及您每次檢視資產時顯示。
不過,若要傳送具有檢視器預設集的資產,檢視器預設集也必須發佈。所有檢視器預設集都必須啟動並發佈,才能取得資產的URL或內嵌程式碼。 請務必啟動並發佈Dynamic Media隨附的所有現成可用的檢視器預設集。 您建立和新增的自訂檢視器預設集會自動啟動,但也必須發佈。
請參閱啟用或停用檢視器預設集。
另請參閱預覽資產。
要發佈查看器預設集:
不支援編輯任何預先定義的現成可用檢視器預設集。如果您編輯現成可用的檢視器預設集,系統會提示您以新名稱儲存它。
要編輯查看器預設集:
在Experience Manager的左上角,選取Experience Manager標誌,然後在左側導軌中,選取「工具(槌子圖示)> 資產 > 檢視器預設集」。
勾選檢視器預設集標題左側的方塊,以選取預設集。
在工具欄上,選擇Edit。
在檢視器預設集編輯器頁面上,使用外觀和行為標籤上的選項,對檢視器預設集進行您想要的變更。
從Appearance標籤,在「查看器預設編輯器」頁的左上角附近,選擇Desktop、Tablet或Phone以更改資產的演示模式。
在頁面的右上角附近,執行下列其中一項操作:
您可以刪除已建立並新增至Dynamic Media的檢視器預設集。
要刪除自定義查看器預設集:
如果您已發佈資產和選取的檢視器, URL 和 Embed (內嵌) 按鈕會在您選取檢視器預設集後顯示。
若要將檢視器預設集套用至資產:
開啟資產,在頁面左上角附近,選取下拉式選單,然後選取檢視器。
如果您已發佈資產和選取的檢視器, URL 和 Embed (內嵌) 按鈕會在您選取檢視器預設集後顯示。
從左窗格選取檢視器預設集,以便將其套用至資產。
您可以複製URL以與其他使用者共用。
若要取得檢視器預設集的URL,請參閱將URL連結至您的Web應用程式。 另請參閱在網頁上嵌入視頻查看器。
如果您使用Experience Manager作為WCM,則可以直接在頁面上使用檢視器預設集來新增資產。 請參閱將Dynamic Media資產新增至頁面。