視頻清除器

視訊清除程式是水準滑桿控制項，可讓使用者動態尋找目前播放的視訊內的任何時間位置。

清除器「旋鈕」也會隨著視訊播放而移動，以指出播放期間視訊的目前時間位置。 視頻清除器始終佔據控制欄的整個寬度。 您可以使視訊清除程式蒙皮，並透過CSS變更其高度和垂直位置。

視訊清除程式的一般外觀由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7videoscrubber 
.s7interactivevideoviewer .s7videoscrubber .s7videotime 
.s7interactivevideoviewer .s7videoscrubber .s7knob

視訊清除程式的CSS屬性

下列CSS類別選取器會追蹤背景、播放和載入指標：

.s7interactivevideoviewer .s7videoscrubber .s7track 
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded 
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed

追蹤的CSS屬性

以下CSS類選擇器控制旋鈕：

.s7interactivevideoviewer .s7videoscrubber .s7knob

旋鈕的CSS屬性

下列CSS類別選取器會控制播放的時間泡泡：

.s7interactivevideoviewer .s7videoscrubber .s7videotime

播放時間泡泡的CSS屬性

視頻清除器工具尖端可以定位。 如需詳細資訊，請參閱使用者介面元素本地化 。

範例 — 使用視訊清除程式和高度為10像素的自訂追蹤顏色來設定視訊檢視器。從控制條的上邊緣和左邊緣放置10個像素和35個像素。

.s7interactivevideoviewer .s7videoscrubber  { 
top:10px; 
left:35px; 
height:10px; 
background-color:#AAAAAA; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7track { 
height:10px; 
background-color:#444444; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded { 
height:10px; 
background-color:#666666; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed { 
height:10px; 
background-color:#888888; 
}

使用navigation參數啟用視訊章節標籤時，章節位置會顯示為視訊清除程式追蹤頂端的標籤。

視訊章節標籤由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7videoscrubber .s7navigation

視訊章節標籤的CSS屬性

範例 — 若要設定5 x 8像素的視訊章節標籤，並針對「預設」和「over」狀態使用不同的圖表。

.s7interactivevideoviewer .s7videoscrubber .s7navigation { 
width:5px; 
height:8px; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] { 
background-image: url("images/v2/VideoScrubberDiamond.png"); 
} 
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] { 
background-image: url("images/v2/VideoScrubberDiamond_over.png"); 
}

視訊章節泡泡位於視訊章節標籤上方，並顯示指定章節的標題、開始時間和說明。 可以控制相對於視頻掃描器軌道的最大氣泡寬度和垂直偏移。 其餘部分由元件自動計算。

視訊章節泡泡是由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7videoscrubber .s7chapter

視訊章節泡泡的CSS屬性

範例 — 設定視訊章節泡泡，該泡泡寬235像素，距視訊清除程式軌道底部向上8像素。

.s7interactivevideoviewer .s7videoscrubber .s7chapter { 
max-width:235px; 
bottom:8px; 
}

視訊章節泡泡由選用的標題和內容組成。 標題含有選用的章節開始時間和章節標題。

標題由下列CSS類選擇器控制：

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

視訊章節氣泡標題的CSS屬性

範例 — 若要設定視訊章節氣泡標題，其高度為22像素、22像素行高、12像素水準邊界和灰色背景。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header { 
height:22px; 
padding:0 12px; 
line-height:22px; 
background-color: rgba(51, 51, 51, 0.8); 
}

視訊章節的開始時間由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

視訊章節開始時間的CSS屬性

範例 — 若要使用灰色十像素Verdana字型來設定章節開始時間，右側有十個像素邊框間距。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime { 
color: #dddddd; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
padding-right: 10px; 
}

視訊章節標題由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

視訊章節標題的CSS屬性

範例 — 若要設定使用白、粗體、十像素Verdana字型的視訊章節標題。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title { 
color: #ffffff; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
font-weight: bold; 
}

視訊章節說明由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

視訊章節說明的CSS屬性

範例 — 若要使用深灰色、11像素Verdana字型和淺灰色背景來設定視訊章節說明。五像素行高、12像素水準邊框間距、12像素頂部邊框間距和9像素底部邊框間距。

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description { 
color: #333333; 
background-color: rgba(221, 221, 221, 0.9); 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 11px; 
line-height: 15px; 
padding: 12px 12px 9px; 
}

章節氣泡底部的楔形連接器由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

楔形連接器的CSS屬性

範例 — 若要設定灰色、六像素楔形連接器：

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail { 
border-color: rgba(221, 221, 221, 0.9) transparent transparent; 
border-width: 6px 6px 0; 
margin: 0 0 0 -6px; 
}