操作調用

當視訊結束時，「呼叫動作」面板會出現，並顯示與特定視訊相關的所有互動色票。

此面板由顯示視訊標題的標題區域、右上角的重播按鈕，以及以可捲動格點顯示的實際互動色票組成。 您可以使用callToActionRecap組態屬性來停用面板。

「動作呼叫」面板一律會佔用整個可用檢視器區域。

下列CSS類別選取器會控制動作面板中背景顏色的外觀：

.s7interactivevideoviewer .s7calltoaction

動作面板之呼叫背景顏色的CSS屬性

背景色	動作面板的背景顏色。

範例

若要設定具有深灰色背景的動作呼叫面板：

.s7interactivevideoviewer .s7calltoaction { 
    background-color: #222222; 
}

下列CSS類別選擇器會控制動作呼叫面板中標題的外觀：

.s7interactivevideoviewer .s7calltoaction .s7header

動作面板標題的呼叫CSS屬性

背景色	標題的背景顏色。
height	頁首高度。
邊框底部	頁首底部邊框。

範例

若要設定高度為70像素的標題，其底部會有深灰色背景和略淺的灰色兩像素邊框：

.s7interactivevideoviewer .s7calltoaction .s7header { 
    height: 70px; 
    border-bottom: 2px solid #444444; 
    background-color: #222222; 
}

下列CSS類別選擇器會控制動作呼叫面板中標題的外觀：

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

動作面板中標題標題的CSS屬性：

color	橫幅內的文字顏色。
字型大小	字型大小.
線高	行高。
font-family	字型系列。
text-align	橫幅中的文字對齊方式。
左邊距	左填補。
右邊填充	右邊距可允許重放按鈕的空間。

範例

若要設定70像素行高、25像素字型大小、白色和左對齊的視訊標題：

.s7interactivevideoviewer .s7calltoaction .s7header .s7title { 
    line-height: 70px; 
    font-size: 25px; 
    color: #ffffff; 
    text-align: left; 
}

下列CSS類別選取器會控制動作呼叫面板中關閉按鈕的外觀：

.s7interactivevideoviewer .s7calltoaction .s7closebutton

「動作呼叫」面板中關閉按鈕的CSS屬性：

頂部	從標題頂端的位置，包括間距。
右側	從標題右側的位置，包括間距。
width	按鈕寬度。
高度	按鈕高度。
背景影像	顯示給定按鈕狀態的影像。
背景位置	如果使用CSS精靈，請放在圖稿精靈內。 請參閱 CSS精靈。

範例

設定28 x 28像素的重放按鈕；從頭部和右側放置20個像素；顯示4種不同按鈕狀態的不同影像；從元件的Sprite影像擷取圖稿：

.s7interactivevideoviewer .s7calltoaction .s7closebutton { 
 top: 20px; 
 right: 20px; 
 background-size: 336px; 
 width: 28px; 
 height: 28px;  
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] { 
 background-image: url(images/v2/PlayPauseButton_sprite.png); 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] { 
 background-position: -28px -1260px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] { 
 background-position: -0px -1260px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] { 
 background-position: -28px -1232px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] { 
 background-position: -0px -1232px; 
}

下列CSS類別選取器會控制動作面板中縮圖格點檢視的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

動作面板中縮圖格點檢視的CSS屬性：

背景色	縮圖區域的背景顏色。

範例

若要設定具有深灰色背景的縮圖區域：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview { 
    background-color: #222222; 
}

下列CSS類別選擇器會控制動作呼叫面板中縮圖儲存格的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

動作面板中縮圖儲存格的CSS屬性：

margin

每個縮圖周圍的水準和垂直邊界大小。 實際水準縮圖間距等於 .s7thumbcell 左右邊界集的總和。 同樣的規則也適用，但適用於垂直間距。

範例

若要設定24像素的水準間距和18像素的垂直間距：

.s7interactivevideoviewer .s7calltoaction .s7thumbcell { 
 margin-top: 9px; 
 margin-bottom: 9px; 
 margin-left: 12px; 
 margin-right: 12px; 
}

下列CSS類別選取器會控制動作面板中縮圖的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumb

動作面板中縮圖的CSS屬性：

寬度	縮圖寬度。
高度	縮圖的高度。
border	縮圖邊框。

範例

若要設定94 x 100像素的縮圖：

.s7interactivevideoviewer .s7calltoaction .s7thumb { 
 width:94px; 
 height:100px; 
}

下列CSS類別選取器會控制動作面板中縮表徵圖簽的外觀：

.s7interactivevideoviewer .s7calltoaction .s7label

動作面板中縮表徵圖簽的CSS屬性：

顏色	標籤的文字顏色。
text-align	標籤的水準對齊。
font-family	字型名稱。
字型大小	字型系列。

範例

若要設定使用白色的標籤，請將15個像素置於中央，並使用Arial字型：

.s7interactivevideoviewer .s7calltoaction .s7label { 
 text-align: center; 
 color: #ffffff; 
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 15px; 
}

如果縮圖數量超過垂直放入檢視的範圍，縮圖會在右側呈現垂直捲軸。 依預設，「動作呼叫」面板會轉換小的垂直列，而不含拇指和捲動按鈕。 不過，您也可以變更檢視器CSS來自訂列。

以下CSS類別選取器會控制動作面板中捲軸區域的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

動作面板中捲軸區域的CSS屬性：

寬度	捲軸寬度。
頂部	垂直捲軸與縮圖區域頂端的偏移。
底部	垂直捲軸與縮圖區域底部偏移。
右側	縮圖區域右側邊緣的水準捲軸偏移。

範例

若要設定寬22像素且從縮圖區域的上方、右側或下方沒有任何邊界的捲軸：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar { 
 top:0px; 
 bottom:0px; 
 right:0px; 
 width:22px; 
}

捲軸軌道是頂端和底部捲軸按鈕之間的區域。 該元件自動設定軌道的位置和高度。

下列CSS類別選取器會控制捲軸軌道在動作呼叫面板中的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

捲動追蹤列的CSS屬性

寬度	捲動軌道欄的寬度。
背景色	軌道欄的背景顏色。

範例

若要設定寬22像素且灰色的捲軸列：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack { 
 width:22px; 
 background-color:#222222; 
}

捲動條拇指在滾動軌道區域內垂直移動。 其垂直位置完全由元件邏輯控制；不過，拇指高度不會根據內容量而動態變更。

下列CSS類別選取器會控制拇指高度的外觀和其他方面：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

動作面板中縮圖高度的CSS屬性：

寬度	拇指寬度。
高度	拇指高度。
填充頂部	在軌道頂部之間垂直填充。
填充底部	在軌道底部之間垂直填充。
邊框半徑	邊框半徑。
背景色	拇指顏色。
背景影像	顯示給定拇指狀態的影像。
背景位置	如果使用CSS精靈，請放在圖稿精靈內。 請參閱 CSS精靈。

範例

若要設定6 x 167像素、3個像素圓角和灰色的捲軸縮圖：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] { 
 width:6px; 
 height:167px; 
 background-color:#666666; 
 background-image:none; 
 border-radius:3px 3px 3px 3px; 
}

下列CSS類別選取器會控制上下捲動按鈕的外觀：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton 
 
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

使用CSS的上、左、下或右屬性無法定位捲動按鈕；檢視器邏輯會自動定位。 互動式視訊檢視器中的「動作」面板不會使用捲軸中的這些按鈕，因此在預設CSS中，這些按鈕的大小會設為0像素。

動作面板中頂端和底部捲動按鈕的CSS屬性：

寬度	按鈕寬度。
高度	按鈕高度。
背景影像	顯示給定按鈕狀態的影像。
背景位置	如果使用CSS精靈，請放在圖稿精靈內。 請參閱 CSS精靈。

按鈕工具提示可以本地化。 請參閱使用者介面元素的本地化。

範例

將捲動按鈕的大小設為0並隱藏，以停用捲動按鈕：

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton { 
 visibility: hidden; 
 width: 0px; 
 height: 0px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton { 
 visibility: hidden; 
 width: 0px; 
 height: 0px; 
}