視頻掃描器

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

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

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

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

視訊Scrubber的CSS屬性

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

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

音軌的CSS屬性

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

.s7interactivevideoviewer .s7videoscrubber .s7knob

旋鈕的CSS屬性

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

.s7interactivevideoviewer .s7videoscrubber .s7videotime

播放時間泡泡的CSS屬性

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

範例 -若要設定視訊檢視器，使用自訂軌道色彩（高度為10像素）來設定視訊檢視器，並從控制列的上邊緣和左邊緣放置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屬性

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

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

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

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

視訊章節泡泡由選用的標題和內容組成。 頁首具有可選的章節開始時間和章節標題。

標題由下列CSS類別選擇器控制：

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

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

範例 -若要設定高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屬性

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

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

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

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

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

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