互動色票

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

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

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

.s7interactivevideoviewer .s7interactiveswatches

互動色票的CSS屬性

互動式色票面板的執行時間位置和方向由上述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屬性

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

範例

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

.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屬性縮略圖間距

範例

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

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

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

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

個別縮圖外觀的CSS屬性

範例

設定縮圖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 top、left、bottom和right屬性來定位捲動按鈕；反之，檢視器邏輯會自動定位。

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

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

範例

要設定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; }