视频洗涤器

视频清理器是一个水平滑块控件,它允许用户动态地搜寻当前播放的视频中的任意时间位置。

在视频播放时,擦洗器“旋钮”也会移动,以指示视频在播放期间的当前时间位置。 视频清理器始终采用控制栏的整个宽度。 可以给视频擦洗器涂皮。 通过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

旋钮的宽度。

高度

旋钮的高度。

背景图像

旋钮图稿。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

请参阅 CSS Sprite

以下CSS类选择器控制播放的气泡时间:

.s7interactivevideoviewer .s7videoscrubber .s7videotime

播放时间气泡的CSS属性

字体系列

用于时间显示文本的字体系列。

字体大小

用于时间显示文本的字体大小。

color

用于时间显示文本的字体颜色。

宽度

气泡区域宽度。

高度

气泡区域高度。

填充

气泡区域填充。

背景图像

气泡图。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

请参阅 CSS Sprite

text-align

文本与气泡区域对齐。

视频清洗工具提示可以本地化。 有关更多信息,请参阅用户界面元素的本地化

示例 — 设置视频查看器,该查看器使用视频清洗器,其自定义跟踪颜色为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属性

宽度

视频章节标记宽度。

高度

视频章节标记高度。

背景图像

视频章节标记图稿。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

请参阅 CSS Sprite

注意

此按钮支持state属性选择器,您可以使用该选择器将不同的外观应用到不同的按钮状态。 特别是, selected='default'对应于默认的视频章节标记状态,当鼠标悬停或触摸手势激活视频章节标记时,将使用selected='over'

示例 — 设置一个5 x 8像素的视频章节标记,并将不同的图稿用于“默认”和“超出”状态。

.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像素且距视频清理器轨道底部向上八像素的视频章节气泡。

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

边框颜色

楔形连接器颜色。

定义为 <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; 
}

在此页面上