操作調用

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

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

動作面板的呼叫一律會取用整個可用的檢視器區域。

以下CSS類選擇器控制對操作面板的調用中背景顏色的外觀：

.s7interactivevideoviewer .s7calltoaction

對操作面板調用的背景顏色的CSS屬性

範例

要設定具有深灰色背景的動作面板調用，請執行以下操作：

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

以下CSS類選擇器控制對操作面板的調用中標題的外觀：

.s7interactivevideoviewer .s7calltoaction .s7header

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

範例

要設定高度為70像素、背景為深灰色、底部為淺灰色的兩個像素邊框的標題：

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

以下CSS類選擇器控制對操作面板的調用中標題的外觀：

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

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

範例

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

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

下列CSS類選擇器控制操作調用面板中關閉按鈕的外觀：

.s7interactivevideoviewer .s7calltoaction .s7closebutton

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

範例

設定28 x 28像素的重播按鈕。 按鈕必須從標頭的頂部和右邊緣放置20個像素。 而且，它必須針對四個不同的按鈕狀態中的每一個顯示不同的影像；從元件的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屬性：

範例

要設定24像素的水準間距和18像素的垂直間距，請執行以下操作：

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

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

.s7interactivevideoviewer .s7calltoaction .s7thumb

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

範例

設定94 x 100像素的縮圖：

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

下列CSS類選擇器控制對操作面板的調用中縮略表徵圖簽的外觀：

.s7interactivevideoviewer .s7calltoaction .s7label

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

範例

要設定使用白色的標籤，請對齊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屬性：

範例

要設定一個捲動條縮圖，該縮圖為6 x 167像素，有三個像素的圓角，以及灰色：

.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的top、lef、bottom或right屬性無法定位捲動按鈕；檢視器邏輯會自動定位。 互動式視訊檢視器中對動作面板的呼叫不會在捲軸中使用這些按鈕，因此在預設CSS中，它們的大小會設為0像素。

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

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

範例

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

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