視訊筆畫壓感 video-scrubber

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

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

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

.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob

視訊筆畫壓感的CSS屬性

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

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

.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed

曲目的CSS屬性

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

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

.s7interactivevideoviewer .s7videoscrubber .s7knob

旋鈕的CSS屬性

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

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

另請參閱 CSS精靈.

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

.s7interactivevideoviewer .s7videoscrubber .s7videotime

時間播放泡泡的CSS屬性

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

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

另請參閱 CSS精靈.

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

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

範例 — 使用視訊筆畫壓感以及十畫素高的自訂軌跡顏色,設定視訊檢視器。 從控制列的頂端和左側邊緣,定位它的10個畫素和35個畫素。

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

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

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

.s7interactivevideoviewer .s7videoscrubber .s7navigation

視訊章節標籤的CSS屬性

width
視訊章節標籤寬度。
height
視訊章節標籤高度。
background-image
影片章節標籤圖稿。
background-position

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

另請參閱 CSS精靈.

NOTE
此按鈕支援 state 屬性選取器,可用來將不同的外觀元素套用至不同的按鈕狀態。 尤其是, selected='default' 對應至預設的視訊章節標籤狀態和 selected='over' 當滑鼠懸停或觸控手勢啟動視訊章節標籤時使用。

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

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

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

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter

視訊章節泡泡的CSS屬性

max-width
視訊章節泡泡的最大寬度。
底部
從視訊筆畫壓感軌跡的垂直位移。

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

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

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

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

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

height
影片章節泡泡標題高度。
填補
視訊章節泡泡標題文字的內部邊框間距。
background-color
影片章節泡泡標題背景顏色。
line-height
視訊章節泡泡圖示頭文字行高度。

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

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

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

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

color
文字色彩。
font-weight
字型粗細。
font-size
字型大小.
font-family
字型系列。
右內邊距
開始時間和章節標題之間的內距。

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

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

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

視訊章節標題的CSS屬性

color
視訊章節標題文字色彩。
font-weight
視訊章節標題字型粗細。
font-size
視訊章節標題字型大小。
font-family
影片章節標題字型系列。

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

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

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

視訊章節說明的CSS屬性

color
影片章節說明文字色彩。
background-color
影片章節說明背景色彩。
font-weight
影片章節說明字型粗細。
font-size
視訊章節說明字型大小。
font-family
視訊章節說明字型系列。
line-height
影片章節說明行高。
填補
影片章節說明內邊距。

範例 — 使用深灰色11畫素Verdana字型搭配淺灰色背景來設定視訊章節說明。 5畫素線高、12畫素水準內距、12畫素上內距和9畫素下內距。

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

楔形聯結器的CSS屬性

border-color

楔形聯結器顏色。

定義為 <color> 透明 因此只定義上邊框顏色,其餘邊框則保持透明。

border-width

楔形聯結器寬度。

定義為 <width> <width> 0 因此只為頂端和水準框線定義相同的寬度,而底端框線寬度為 0 .

margin
僅定義負下邊界。 其值應與 border-width .

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8