操作調用

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

此面板由顯示視訊標題的標題區域、右上角的重播按鈕,以及以可捲動格點顯示的實際互動色票組成。 您可以使用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精靈

注意

此按鈕支援state屬性選擇器,可用來將不同的外觀套用至不同的按鈕狀態。

範例

設定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

縮圖邊框。

注意

縮圖支援state屬性選擇器,可用來將不同的外觀套用至不同的縮圖狀態。 尤其是,state="selected"對應於目前選取之影像的縮圖;state="default"對應其餘縮圖;state="over"用於滑鼠暫留。

範例

若要設定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精靈

注意

Thumb支援state屬性選擇器,可用來將不同的外觀套用至下列不同的Thumb狀態:"up""down""over""disabled"

範例

若要設定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精靈

注意

這些按鈕支援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; 
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now