視頻掃描器

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

當視訊播放時,Scrubber 'knob'也會移動,以指出視訊在播放期間的目前時間位置。 視訊筆畫器一律會取得控制列的整個寬度。 您可將視訊筆畫變成外觀。 使用CSS來變更其高度和垂直位置。

使用下列CSS類別選擇器控制視訊筆畫的一般外觀:

.s7videoviewer .s7videoscrubber 
.s7videoviewer .s7videoscrubber .s7videotime 
.s7videoviewer .s7videoscrubber .s7knob

視訊Scrubber的CSS屬性

頂部

從上邊框的位置,包括間距。

底部

從底部邊框的位置,包括間距。

height

視訊筆刷的高度。

背景色

視訊筆畫的顏色。

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

.s7videoviewer .s7videoscrubber .s7track 
.s7videoviewer .s7videoscrubber .s7trackloaded 
.s7videoviewer .s7videoscrubber .s7trackplayed

音軌的CSS屬性

高度

對應軌道的高度。

背景色

對應軌道的顏色。

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

.s7videoviewer .s7videoscrubber .s7knob

旋鈕的CSS屬性

頂部

垂直旋鈕偏移。

width

旋鈕寬度。

高度

旋鈕高度。

背景影像

旋鈕圖稿。

背景位置

如果使用CSS精靈,請放在圖稿精靈內。

請參閱 CSS精靈

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

.s7videoviewer .s7videoscrubber .s7videotime

播放時間泡泡的CSS屬性

font-family

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

字型大小

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

color

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

寬度

氣泡區域寬度。

高度

泡泡區域高度。

填補

泡泡區域填充。

背景影像

氣泡圖稿。

背景位置

如果使用CSS精靈,請放在圖稿精靈內。

請參閱 CSS精靈

text-align

文字與泡泡區域對齊。

視訊筆畫工具提示可以局部化。 如需詳細資訊,請參閱使用者介面元素的本地化

範例 -若要設定視訊檢視器,使用自訂軌道色彩(高度為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屬性

寬度

視訊章節標籤寬度。

高度

視訊章節標籤高度。

背景影像

視訊章節標籤圖稿。

背景位置

如果使用CSS精靈,請放在圖稿精靈內。

請參閱 CSS精靈

注意

此按鈕支援state屬性選擇器,您可使用它將不同的外觀套用至不同的按鈕狀態。 尤其是,selected='default'對應於預設的視訊章節標籤狀態,當視訊章節標籤由滑鼠置於或觸控手勢啟動時,會使用selected='over'

範例 -若要設定視訊章節標籤,此標籤為5 x 8像素,並針對「預設」和「over」狀態使用不同的圖稿。

.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屬性

最大寬度

視訊章節氣泡的最大寬度。

底部

與視訊Scrubber軌道垂直偏移。

範例 -若要設定視訊章節泡泡,該泡泡寬235像素,且距視訊筆畫軌道底部上方8像素。

.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屬性

顏色

文字色彩.

字型粗細

字型粗細。

字型大小

字型大小.

font-family

字型系列。

右邊填充

開始時間和章節標題之間的間距。

範例 -若要使用灰色十像素Verdana字型設定章節開始時間,並在右側填入十像素。

.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屬性

顏色

視訊章節標題文字顏色。

字型粗細

影片章節標題字型粗細。

字型大小

視訊章節標題字型大小。

font-family

影片章節標題字型系列。

範例 -若要設定使用白色、粗體、十像素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屬性

顏色

視訊章節說明文字色彩。

背景色

視訊章節說明背景顏色。

字型粗細

視訊章節說明字型粗細。

字型大小

視訊章節說明字型大小。

font-family

視訊章節說明字型系列。

線高

視訊章節描述行高。

填補

視訊章節說明內部填補。

範例 -使用深灰色、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屬性

邊框色彩

楔形接頭顏色。

定義為 <color>透明,因此僅定義頂部邊框顏色,而其餘邊框保持透明。

邊框寬度

楔形連接器寬度。

定義為 <width> <width> 0 ,以便僅為頂部和水準邊界定義相同寬度,並且底部邊框寬度為 0

margin

僅定義負底邊距。 其值應與 border-width 的值相同。

示例 -要設定灰色、六像素楔形連接器:

.s7videoviewer .s7videoscrubber .s7chapter .s7tail { 
border-color: rgba(221, 221, 221, 0.9) transparent transparent; 
border-width: 6px 6px 0; 
margin: 0 0 0 -6px; 
}

本頁內容