視訊筆畫壓感 video-scrubber
視訊筆畫壓感是水準滑桿控制項，可讓使用者動態搜尋目前播放視訊內的任何時間位置。
清除器「旋鈕」也會隨著視訊播放而移動，以指出視訊在播放期間的目前時間位置。 視訊筆畫壓感一律採用控制列的整個寬度。 您可以利用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屬性
state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態。 特別是，selected='default'對應於預設的視訊章節標籤狀態，當滑鼠移至上方或觸控手勢啟動視訊章節標籤時，會使用selected='over'。範例 — 若要設定視訊章節標籤（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屬性
範例 — 若要設定灰色、六個畫素的楔形聯結器：
.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}