視頻掃描器

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

當視訊播放時,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; 
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now