視訊結束時,「動作呼叫」面板會顯示,並顯示與特定視訊相關聯的所有互動色票。
此面板包含顯示視訊標題的標題區域、右上角的重播按鈕,以及以可捲動格線顯示的實際互動色票。 您可以使用callToActionRecap配置屬性來停用面板。
動作面板的呼叫一律會取用整個可用的檢視器區域。
以下CSS類選擇器控制對操作面板的調用中背景顏色的外觀:
.s7interactivevideoviewer .s7calltoaction
背景顏色 |
動作面板的背景顏色。 |
要設定具有深灰色背景的動作面板調用,請執行以下操作:
.s7interactivevideoviewer .s7calltoaction {
background-color: #222222;
}
以下CSS類選擇器控制對操作面板的調用中標題的外觀:
.s7interactivevideoviewer .s7calltoaction .s7header
背景顏色 |
標題的背景顏色。 |
height |
標題高度。 |
邊框底部 |
標題底部邊框。 |
要設定高度為70像素、背景為深灰色、底部為淺灰色的兩個像素邊框的標題:
.s7interactivevideoviewer .s7calltoaction .s7header {
height: 70px;
border-bottom: 2px solid #444444;
background-color: #222222;
}
以下CSS類選擇器控制對操作面板的調用中標題的外觀:
.s7interactivevideoviewer .s7calltoaction .s7header .s7title
color |
橫幅內的文字顏色。 |
字型大小 |
字型大小. |
線高 |
行高。 |
字型系列 |
字型系列。 |
文本對齊 |
橫幅中的文字對齊方式。 |
向左邊框間距 |
左邊框間距。 |
邊框間距右 |
右邊框間距可為「重播」按鈕留出空間。 |
若要設定視訊標題,其線高為70像素、字型大小為25像素、白色和左對齊:
.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
line-height: 70px;
font-size: 25px;
color: #ffffff;
text-align: left;
}
下列CSS類選擇器控制操作調用面板中關閉按鈕的外觀:
.s7interactivevideoviewer .s7calltoaction .s7closebutton
頂部 |
從標題頂端的位置,包括邊框間距。 |
右側 |
從標題右側的位置,包括邊框間距。 |
width |
按鈕寬度。 |
高度 |
按鈕高度。 |
背景 — 影像 |
針對指定按鈕狀態顯示的影像。 |
背景位置 |
如果使用CSS精靈,則位於圖稿精靈內。 請參閱 CSS Sprites 。 |
此按鈕支援state
屬性選擇器,可用於將不同的外觀應用於不同的按鈕狀態。
設定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
背景顏色 |
縮圖區域的背景顏色。 |
要設定具有深灰色背景的縮略圖區域,請執行以下操作:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
background-color: #222222;
}
下列CSS類選擇器控制「操作調用」面板中縮圖單元格的外觀:
.s7interactivevideoviewer .s7calltoaction .s7thumbcell
margin |
每個縮圖周圍的水準和垂直邊界大小。 實際水準縮圖間距等於為 .s7thumbcell 設定的左和右邊距之和。 同樣的規則也適用,但適用於垂直間距。 |
要設定24像素的水準間距和18像素的垂直間距,請執行以下操作:
.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
margin-top: 9px;
margin-bottom: 9px;
margin-left: 12px;
margin-right: 12px;
}
下列CSS類別選取器會控制動作呼叫面板中縮圖的外觀:
.s7interactivevideoviewer .s7calltoaction .s7thumb
寬度 |
縮圖寬度。 |
高度 |
縮圖的高度。 |
border |
縮圖的邊框。 |
縮圖支援state
屬性選取器,可用來將不同外觀套用至不同的縮圖狀態。 尤其state="selected"
對應於目前所選影像的縮圖;state="default"
對應至其餘縮圖;state="over"
用於滑鼠暫留。
設定94 x 100像素的縮圖:
.s7interactivevideoviewer .s7calltoaction .s7thumb {
width:94px;
height:100px;
}
下列CSS類選擇器控制對操作面板的調用中縮略表徵圖簽的外觀:
.s7interactivevideoviewer .s7calltoaction .s7label
色彩 |
標籤的文本顏色。 |
文本對齊 |
標籤的水準對齊。 |
字型系列 |
字型名稱。 |
字型大小 |
字型系列。 |
要設定使用白色的標籤,請對齊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
寬度 |
捲動條寬度。 |
頂部 |
垂直捲動條從縮圖區域的頂部偏移。 |
底部 |
垂直捲動條從縮圖區域底部偏移。 |
右側 |
縮圖區域右邊的水準捲動條偏移。 |
要設定寬22像素的捲動條,並且從縮圖區域的上、右或底部沒有任何邊界:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
top:0px;
bottom:0px;
right:0px;
width:22px;
}
捲動條軌跡是頂部和底部捲動條按鈕之間的區域。 元件會自動設定軌跡的位置和高度。
以下CSS類選擇器控制對操作面板的調用中捲動條跟蹤的外觀:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack
寬度 |
捲動追蹤列的寬度。 |
背景顏色 |
軌道欄的背景顏色。 |
要設定寬22像素且具有灰色的捲動條軌道:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
width:22px;
background-color:#222222;
}
捲動條拇指在捲動軌道區域內垂直移動。 其垂直位置完全由元件邏輯控制;不過,縮圖高度不會根據內容量而動態變更。
以下CSS類選擇器控制拇指高度和其他方面的外觀:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb
寬度 |
拇指寬度。 |
高度 |
拇指高度。 |
邊框間距 — 頂端 |
在軌道頂端之間垂直邊框間距。 |
邊框間距 |
軌道底部之間的垂直邊框間距。 |
邊框半徑 |
邊框半徑。 |
背景顏色 |
拇指的顏色。 |
背景 — 影像 |
為給定縮圖狀態顯示的影像。 |
背景位置 |
如果使用CSS精靈,則位於圖稿精靈內。 請參閱 CSS Sprites 。 |
Thumb支援state
屬性選擇器,它可用於將不同的外觀應用於以下不同的Thumb狀態:"up"
、"down"
、"over"
和"disabled"
。
要設定一個捲動條縮圖,該縮圖為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精靈,則位於圖稿精靈內。 請參閱 CSS Sprites 。 |
這些按鈕支援state
屬性選擇器,可用於將不同的外觀應用到以下不同的拇指狀態:"up"
、"down"
、"over"
和"disabled"
。
按鈕工具提示可翻譯。 請參閱使用者介面元素的本地化。
將捲動按鈕的大小設定為0並隱藏,以停用捲動按鈕:
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
visibility: hidden;
width: 0px;
height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
visibility: hidden;
width: 0px;
height: 0px;
}