視訊筆畫壓感 video-scrubber

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

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

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

.s7smartcropvideoviewer .s7videoscrubber
.s7smartcropvideoviewer .s7videoscrubber .s7videotime
.s7smartcropvideoviewer .s7videoscrubber .s7knob

視訊筆畫壓感的CSS屬性

頂部
上邊框的位置,包括邊框間距。
底部
從下邊框定位,包括內距。
height
視訊清除程式的高度。
background-color
視訊筆畫壓感色彩。

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

.s7smartcropvideoviewer .s7videoscrubber .s7track
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded
.s7smartcropvideoviewer .s7videoscrubber .s7trackplayed

曲目的CSS屬性

height
對應軌道的高度。
background-color
對應曲目的色彩。

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

.s7smartcropvideoviewer .s7videoscrubber .s7knob

旋鈕的CSS屬性

頂部
垂直旋鈕位移。
width
旋鈕寬度。
height
旋鈕高度。
background-image
旋鈕圖稿。
background-position

若使用CSS sprite,則定位在圖稿sprite內。

另請參閱 CSS精靈.

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

.s7smartcropvideoviewer .s7videoscrubber .s7videotime

時間播放泡泡的CSS屬性

font-family
用於時間顯示文字的字型系列。
font-size
用於時間顯示文字的字型大小。
color
用於時間顯示文字的字型顏色。
width
泡泡區域寬度。
height
泡泡區域高度。
填補
泡泡區域邊框間距。
background-image
泡泡圖稿。
background-position

若使用CSS sprite,則定位在圖稿sprite內。

另請參閱 CSS精靈.

text-align
文字與泡泡區域的對齊方式。

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

範例 — 若要設定含有自訂軌跡顏色(10畫素高)之視訊筆畫壓感的視訊檢視器。 最後,請讓它位於距離控制列上邊緣和左邊緣10畫素和35畫素的位置。

.s7smartcropvideoviewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7smartcropvideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7smartcropvideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7smartcropvideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8