視訊筆畫壓感 video-scrubber

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

undefined
undefined

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

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

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

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

視訊筆畫壓感的 CSS屬性

前

上邊框的位置，包括邊框間距。

後

從下邊框定位，包括內距。

高度

視訊筆畫壓感的高度。

背景色彩

視訊筆畫壓感色彩。

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

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

曲目的 CSS屬性

高度

對應磁軌的高度。

背景色彩

對應曲目的顏色。

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

.s7smartcropvideoviewer .s7videoscrubber .s7knob

旋鈕的 CSS屬性

前

垂直旋鈕位移。

寬度

旋鈕寬度。

高度

旋鈕的高度。

背景影像

旋鈕圖稿。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

請參閱 CSS Sprite。

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

.s7smartcropvideoviewer .s7videoscrubber .s7videotime

時間播放泡泡的 CSS屬性

字型系列

用於時間顯示文字的字型系列。

字型大小

用於時間顯示文字的字型大小。

色彩

用於時間顯示文字的字型顏色。

寬度

泡泡區域寬度。

高度

泡泡區域高度。

內距

泡泡區域邊距。

背景影像

泡泡圖稿。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

請參閱 CSS Sprite。

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