視訊筆畫壓感

視訊筆畫壓感是水準滑桿控制項，可讓使用者動態搜尋目前播放視訊內的任何時間位置。

清除器「旋鈕」也會隨著視訊播放而移動，以指出視訊在播放期間的目前時間位置。 視訊筆畫壓感一律採用控制列的整個寬度。 您可以透過CSS建立視訊筆畫壓感的外觀，並變更其高度和垂直位置。

視訊筆畫壓感的一般外觀是由下列CSS類別選取器所控制：

.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob

視訊筆畫壓感的CSS屬性

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

.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed

曲目的CSS屬性

下列CSS類別選擇器會控制旋鈕：

.s7videoviewer .s7videoscrubber .s7knob

旋鈕的CSS屬性

下列CSS類別選擇器可控制播放時間泡泡：

.s7videoviewer .s7videoscrubber .s7videotime

時間播放泡泡的CSS屬性

視訊筆畫壓感工具提示可以本地化。 另請參閱 使用者介面元素的本地化 以取得詳細資訊。

範例 — 使用自訂軌跡顏色的視訊筆畫壓感來設定視訊檢視器。 筆畫壓感必須有10個畫素高，並且位於距離控制列頂端和左側邊緣10個畫素和35個畫素的位置。

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

使用啟用視訊章節時 navigation 引數，章節位置會在視訊筆畫壓感軌跡上方顯示為標籤。

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

 .s7videoviewer .s7videoscrubber .s7navigation

視訊章節標籤的CSS屬性

範例 — 設定5 x 8畫素的視訊章節標籤，並在「預設」和「超過」狀態使用不同的圖片。

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

影片章節泡泡位於影片章節標籤上方，並顯示指定章節的標題、開始時間和說明。 您可以控制相對於視訊筆畫壓感軌跡的最大泡泡寬度和垂直位移。 其餘由元件自動計算。

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

.s7videoviewer .s7videoscrubber .s7chapter

視訊章節泡泡的CSS屬性

範例 — 若要設定寬235畫素、且從視訊筆畫壓感軌跡底部往上八畫素的視訊章節泡泡。

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

影片章節泡泡圖包含選用的標題和內容。 標題具有可選的章節開始時間和章節標題。

標頭由以下CSS類別選擇器控制：

.s7videoviewer .s7videoscrubber .s7chapter .s7header

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

範例 — 若要設定高22畫素、行高22畫素、水準邊界12畫素和灰色背景的視訊章節泡泡標題。

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

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

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

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

範例 — 若要設定章節開始時間，請使用灰色10畫素Verdana字型，並在右側有10畫素邊框間距。

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

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

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title

視訊章節標題的CSS屬性

範例 — 設定使用白色、粗體、10畫素Verdana字型的視訊章節標題。

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

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

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

視訊章節說明的CSS屬性

範例 — 使用深灰色11畫素Verdana字型搭配淺灰色背景來設定視訊章節說明。 最後，使用5個畫素的行高、12個畫素的水準邊框間距、12個畫素的上邊框間距和9個畫素的下邊框間距。

.s7videoviewer .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類別選取器控制：

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

楔形聯結器的CSS屬性

範例 — 若要設定灰色、6畫素楔形聯結器：

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