互動色票

如果在設定中將互動式資料傳遞至檢視器,則互動式色票面板會出現在視訊內容旁。 它由頂端的橫幅組成,可呈現「按一下即可檢視」等文字、一欄或多個互動色票和兩個捲動按鈕(僅適用於案頭系統)。

在案頭系統和觸控裝置上,以橫向方向,互動式色票會垂直轉譯至視訊內容的右側。 在縱向的觸控裝置上,它們會以水準色票列的形式顯示在檢視器底部。

以下CSS類選擇器控制交互色板面板的位置和方向:

.s7interactivevideoviewer .s7interactiveswatches

互動色票的CSS屬性

width

互動色板面板的寬度

height

互動色票面板的高度。

頂部

互動色票面板的頂端位置。

底部

交互色板面板的底部位置。

左側

交互色板面板的左側位置。

右側

交互色板面板的右側位置。

互動式色票面板的執行時間位置和方向由上述CSS屬性的組合定義,如下所示:

  • 要在查看器底部水準渲染交互色板,請將高度設定為絕對像素值;從左到下到0px;寬度、右和上到自動。
  • 若要垂直地向視頻內容的右側呈現互動色板,請將寬度設定為絕對像素;右上至0px;高度,左下角自動。

您可以透過此樣式使用CSS標籤,以達到互動式色票面板的最適化放置。

範例

設定互動式色票面板,以橫向方向在觸控裝置上的檢視器底部水準轉譯。 此外,若要在所有其他情況下將其垂直顯示於視訊內容的右側:

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches, 
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches { 
 width:120px; 
 height:auto; 
 right:0px; 
 top:0px; 
 left:auto; 
 bottom:auto; 
} 
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches { 
 width:auto; 
 height:136px; 
 right:auto; 
 top:auto; 
 left:0px; 
 bottom:0px; 
}

橫幅的大小和位置是由互動式色票元件根據套用至CSS的其他樣式來管理,且無法明確設定。

以下CSS類選擇器控制橫幅面板的外觀:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

橫幅面板的CSS屬性

背景顏色

橫幅面板的背景顏色。

color

橫幅面板內的文字顏色。

border

橫幅面板周圍的邊框。

字型粗細

用於橫幅面板內文字的字型粗細。

字型大小

用於橫幅面板內文本的字型大小。

字型系列

用於橫幅面板內文本的字型系列。

font-align

用於橫幅面板內文本的字型對齊方式。

橫幅工具提示可本地化。 如需詳細資訊,請參閱使用者介面元素本地化

範例

要設定帶有深灰色背景、較淺灰色的兩個像素邊框以及水準居中的白文本的橫幅:

.s7interactivevideoviewer .s7interactiveswatches .s7banner { 
    background-color: #222222; 
    border-bottom: 2px solid #444444; 
    color: #ffffff; 
    text-align: center; 
}

以下CSS類選擇器控制色板的外觀:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

色板區域的CSS屬性

背景顏色

色板區域的背景顏色。

範例

要設定帶有深灰色背景的色板區域:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches { 
    background-color: #222222; 
}

以下CSS類選擇器控制色板縮略圖之間的間距:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

色板的CSS屬性縮略圖間距

margin

每個縮圖周圍的水準和垂直邊界的大小。 實際縮圖間距等於為 .s7thumbcell 設定的左邊距和右邊距的總和。

範例

要設定垂直間距為10個像素:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell { 
 margin: 5px; 
}

以下CSS類選擇器控制各個縮略圖的外觀:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

個別縮圖外觀的CSS屬性

寬度

縮圖寬度。

高度

縮圖的高度。

邊框

縮圖的邊框。

注意

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

範例

設定縮圖100 x 75像素:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb { 
 width:100px; 
 height:75px; 
}

以下CSS類選擇器控制縮略表徵圖簽的外觀:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

縮表徵圖簽外觀的CSS屬性

色彩

文字色彩.

邊框

標籤邊框。

文本對齊

水準文字對齊。

字型系列

字型名稱。

範例

要設定標籤,使用左對齊、白色、12像素、Helvetica®字型和底邊框:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label { 
 border-bottom: 1px solid #e9e9e9; 
 text-align: left; 
color: #ffffff; 
font-family: Helvetica,sans-serif; 
font-size: 12px; 
}

以下CSS類選擇器控制上下滾動按鈕的外觀:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton

.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton

無法使用CSS topleftbottomright屬性來定位捲動按鈕;反之,檢視器邏輯會自動定位。

上下捲動按鈕外觀的CSS屬性

寬度

捲動按鈕的寬度。

高度

捲動按鈕的高度。

背景 — 影像

針對指定按鈕狀態顯示的影像。

背景位置

使用CSS精靈的圖稿精靈內的位置。

另請參閱 CSS Sprite

注意

此按鈕支援state屬性選擇器,您可使用它將不同的外觀應用於按鈕狀態:" up"、" down"、" over"和" disabled"。

按鈕工具提示可翻譯。 如需詳細資訊,請參閱使用者介面元素本地化

範例

要設定60 x 36像素的向上滾動按鈕,請為每個狀態具有不同的圖稿,並從元件的Sprite影像中獲取該圖稿:

.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton { 
 background-size: 120px; 
 width: 60px; 
 height: 36px;  
} 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] { 
 background-image: url(images/v2/InteractiveSwatches_light_sprite.png); 
} 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; } 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; } 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; } 
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }

本頁內容