視訊清除程式是水準滑桿控制項,可讓使用者動態尋找目前播放的視訊內的任何時間位置。
清除器「旋鈕」也會隨著視訊播放而移動,以指出播放期間視訊的目前時間位置。 視頻清除器始終佔據控制欄的整個寬度。 您可以使視訊清除程式蒙皮,並透過CSS變更其高度和垂直位置。
視訊清除程式的一般外觀由下列CSS類別選取器控制:
.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob
視訊清除程式的CSS屬性
頂部 |
從上邊框的位置,包括邊框間距。 |
底部 |
從底部邊框的位置,包括邊框間距。 |
height |
視頻清除程式的高度。 |
背景顏色 |
視頻清除器的顏色。 |
下列CSS類別選取器會追蹤背景、播放和載入指標:
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed
追蹤的CSS屬性
高度 |
對應軌道的高度。 |
背景顏色 |
對應軌道的顏色。 |
以下CSS類選擇器控制旋鈕:
.s7interactivevideoviewer .s7videoscrubber .s7knob
旋鈕的CSS屬性
頂部 |
垂直旋鈕偏移。 |
width |
旋鈕的寬度。 |
高度 |
旋鈕高度。 |
背景 — 影像 |
旋鈕圖稿。 |
背景位置 |
如果使用CSS精靈,則位於圖稿精靈內。 請參閱 CSS Sprites 。 |
下列CSS類別選取器會控制播放的時間泡泡:
.s7interactivevideoviewer .s7videoscrubber .s7videotime
播放時間泡泡的CSS屬性
字型系列 |
用於時間顯示文本的字型系列。 |
字型大小 |
用於時間顯示文本的字型大小。 |
color |
用於時間顯示文本的字型顏色。 |
寬度 |
氣泡區域寬度。 |
高度 |
氣泡區域高度。 |
填補 |
氣泡區域填充。 |
背景 — 影像 |
氣泡圖稿。 |
背景位置 |
如果使用CSS精靈,則位於圖稿精靈內。 請參閱 CSS Sprites 。 |
文本對齊 |
文本與氣泡區域對齊。 |
視頻清除器工具尖端可以定位。 如需詳細資訊,請參閱使用者介面元素本地化 。
範例 — 使用視訊清除程式和高度為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屬性
寬度 |
視訊章節標籤寬度。 |
高度 |
視訊章節標籤高度。 |
背景 — 影像 |
視訊章節標籤圖稿。 |
背景位置 |
如果使用CSS精靈,則位於圖稿精靈內。 請參閱 CSS Sprites 。 |
此按鈕支援state
屬性選擇器,您可以使用它將不同的外觀應用於不同的按鈕狀態。 尤其是, selected='default'
對應於預設視訊章節標籤狀態,當滑鼠移至或觸控手勢啟動視訊章節標籤時,會使用selected='over'
。
範例 — 若要設定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字型和淺灰色背景來設定視訊章節說明。五像素行高、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屬性
邊框顏色 |
楔形連接器顏色。 定義為 <color>透明,以便僅定義上邊框顏色,而其餘邊框保持透明。 |
邊框寬度 |
楔形連接器寬度。 定義為 <width> <width> 0 ,以便僅為上邊框和水準邊框定義相同的寬度,並且底邊框寬度為 0 。 |
margin |
僅定義負底邊。 其值應與 border-width 相同。 |
範例 — 若要設定灰色、六像素楔形連接器:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}