视频清理器是一个水平滑块控件,它允许用户动态地搜寻当前播放的视频中的任意时间位置。
在视频播放时,擦洗器“旋钮”也会移动,以指示视频在播放期间的当前时间位置。 视频清理器始终采用控制栏的整个宽度。 可以给视频擦洗器涂皮。 通过CSS更改其高度和垂直位置。
通过以下CSS类选择器控制视频清理器的常规外观:
.s7video360viewer .s7videoscrubber
.s7video360viewer .s7videoscrubber .s7videotime
.s7video360viewer .s7videoscrubber .s7knob
视频清理器的CSS属性
顶端 |
从上边框的位置,包括内边距。 |
底部 |
从下边框的位置,包括内边距。 |
height |
视频清理器的高度。 |
背景颜色 |
视频擦洗器的颜色。 |
以下CSS类选择器跟踪背景、播放和加载指示器:
.s7video360viewer .s7videoscrubber .s7track
.s7video360viewer .s7videoscrubber .s7trackloaded
.s7video360viewer .s7videoscrubber .s7trackplayed
跟踪的CSS属性
高度 |
相应轨道的高度。 |
背景颜色 |
相应轨道的颜色。 |
以下CSS类选择器控制旋钮:
.s7video360viewer .s7videoscrubber .s7knob
旋钮的CSS属性
顶端 |
垂直旋钮偏移。 |
width |
旋钮的宽度。 |
高度 |
旋钮的高度。 |
背景图像 |
旋钮图稿。 |
背景位置 |
在图稿Sprite中放置(如果使用CSS Sprite)。 请参阅 CSS Sprite 。 |
以下CSS类选择器控制播放的气泡时间:
.s7video360viewer .s7videoscrubber .s7videotime
播放时间气泡的CSS属性
字体系列 |
用于时间显示文本的字体系列。 |
字体大小 |
用于时间显示文本的字体大小。 |
color |
用于时间显示文本的字体颜色。 |
宽度 |
气泡区域宽度。 |
高度 |
气泡区域高度。 |
填充 |
气泡区域填充。 |
背景图像 |
气泡图。 |
背景位置 |
在图稿Sprite中放置(如果使用CSS Sprite)。 请参阅 CSS Sprite 。 |
text-align |
文本与气泡区域对齐。 |
视频清洗工具提示可以本地化。 有关更多信息,请参阅用户界面元素的本地化 。
示例 — 设置视频查看器,并使用高度为十像素的自定义跟踪颜色进行视频清理。并且,将其定位到控制栏的上边缘和左边缘10个像素和35个像素。
.s7video360viewer .s7videoscrubber {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7video360viewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7video360viewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7video360viewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}