視訊筆畫壓感 video-scrubber

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

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

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

.s7mixedmediaviewer .s7videoscrubber
.s7mixedmediaviewer .s7videoscrubber .s7videotime
.s7mixedmediaviewer .s7videoscrubber .s7knob

視訊筆畫壓感的CSS屬性

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

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

.s7mixedmediaviewer .s7videoscrubber .s7track
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded
.s7mixedmediaviewer .s7videoscrubber .s7trackplayed

曲目的CSS屬性

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

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

.s7mixedmediaviewer .s7videoscrubber .s7knob

旋鈕的CSS屬性

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

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

另請參閱 CSS精靈.

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

.s7mixedmediaviewer .s7videoscrubber .s7videotime

時間播放泡泡的CSS屬性

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

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

另請參閱 CSS精靈.

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

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

範例 section-e8caea0a303c425a8a637c2a47c06355

設定混合媒體檢視器,其中包含自訂軌跡顏色的視訊筆畫壓感器(10畫素高),並從控制列的頂端和左側邊緣放置10畫素和35畫素。

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