视频清理器是一个水平滑块控件,它允许用户动态地搜寻当前播放的视频中的任意时间位置。
在视频播放时,擦洗器“旋钮”也会移动,以指示视频在播放期间的当前时间位置。 视频清理器始终采用控制栏的整个宽度。 可以通过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 |
旋钮的宽度。 |
高度 |
旋钮的高度。 |
背景图像 |
旋钮图稿。 |
背景位置 |
在图稿Sprite中放置(如果使用CSS Sprite)。 请参阅 CSS Sprite . |
以下CSS类选择器控制播放的气泡时间:
.s7videoviewer .s7videoscrubber .s7videotime
播放时间气泡的CSS属性
字体系列 |
用于时间显示文本的字体系列。 |
字体大小 |
用于时间显示文本的字体大小。 |
color |
用于时间显示文本的字体颜色。 |
宽度 |
气泡区域宽度。 |
高度 |
气泡区域高度。 |
填充 |
气泡区域填充。 |
背景图像 |
气泡图。 |
背景位置 |
在图稿Sprite中放置(如果使用CSS Sprite)。 请参阅 CSS Sprite . |
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属性
宽度 |
视频章节标记宽度。 |
高度 |
视频章节标记高度。 |
背景图像 |
视频章节标记图稿。 |
背景位置 |
在图稿Sprite中放置(如果使用CSS Sprite)。 请参阅 CSS Sprite . |
此按钮支持 state
属性选择器,您可以使用该选择器将不同的外观应用到不同的按钮状态。 特别是, selected='default'
与默认视频章节标记状态和 selected='over'
在鼠标悬停或触摸手势激活视频章节标记时使用。
示例 — 设置5 x 8像素的视频章节标记,并将不同的图标用于“默认”和“超出”状态。
.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字体和浅灰色背景设置视频章节描述。 最后,使用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 |
仅定义负下边距。 它的值应与 边框宽度 . |
示例 — 要设置灰色的六像素楔形连接器:
.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}