視頻掃描器是水準滑塊控制項,允許用戶動態地查找當前播放的視頻中的任何時間位置。
在播放視頻時,掃描器「旋鈕」也移動,以指示回放期間視頻的當前時間位置。 視頻掃描器總是取控制條的整個寬度。 通過CSS對視頻掃描器進行皮膚化和改變其高度和垂直位置。
視頻掃描器的一般外觀由以下CSS類選擇器控制:
.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob
視頻掃描器的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屬性
字型系列 |
用於時間顯示文本的字型系列。 |
字型大小 |
用於時間顯示文本的字型大小。 |
color |
用於時間顯示文本的字型顏色。 |
寬度 |
氣泡區域寬度。 |
高度 |
氣泡區高度。 |
填補 |
氣泡區域填充。 |
背景影像 |
氣泡圖。 |
背景位置 |
如果使用CSS浮雕,則在圖稿浮雕內定位。 請參閱 CSS繁體 。 |
文本對齊 |
文本與氣泡區域的對齊。 |
視頻掃描器工具尖端可被本地化。 請參閱 用戶介面元素的本地化 的子菜單。
示例 — 設定帶有自定義曲線顏色的視頻掃描器的視頻查看器。 洗滌器必須高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像素的視頻章節標籤,並對「default」和「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屬性
最大寬度 |
視頻章節氣泡的最大寬度。 |
底部 |
從視頻掃描器軌道垂直偏移。 |
示例 — 設定視頻章節氣泡,該氣泡寬度為235像素,從視頻掃描器軌道底部向上方八像素。
.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屬性
顏色 |
文字色彩. |
字型粗細 |
字型粗細。 |
字型大小 |
字型大小. |
字型系列 |
字型系列。 |
右填充 |
開始時間和章節標題之間的填充。 |
示例 — 使用灰色十像素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屬性
顏色 |
視頻章節標題文本顏色。 |
字型粗細 |
視頻章節標題字型粗細。 |
字型大小 |
視頻章節標題字型大小。 |
字型系列 |
視頻章節標題字型系列。 |
示例 — 設定使用白色、粗體、十像素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屬性
顏色 |
視頻章節描述文本顏色。 |
背景色 |
視頻章描述背景顏色。 |
字型粗細 |
視頻章節描述字型粗細。 |
字型大小 |
視頻章描述字型大小。 |
字型系列 |
視頻章節描述字型系列。 |
線高 |
視頻章節描述行高。 |
填補 |
視頻章節描述內填充。 |
示例 — 使用深灰色、11像素Verdana字型和淺灰色背景設定視頻章節說明。 最後,使用五像素行高、12像素水準填充、12像素頂部填充和九像素底部填充。
.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 |
僅定義負底邊距。 它應具有與 邊框寬度 。 |
示例 — 要設定灰色六像素楔形連接器:
.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}