视频洗刷 video-scrubber

视频洗刷是水平滑块控件,允许用户动态搜索到当前播放视频内的任何时间位置。

清理器“旋钮”也会随着视频播放而移动,以指示视频在播放期间的当前时间位置。 视频清理器始终占据控制栏的整个宽度。 可以通过CSS构建视频洗刷的外观并更改其高度和垂直位置。

视频清理器的常规外观由以下CSS类选择器控制:

.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob

视频清理器的CSS属性

顶端
上边框的位置,包括内边距。
底部
从下边框定位,包括内边距。
height
视频洗刷的高度。
background-color
视频洗刷的颜色。

以下CSS类选择器跟踪背景、播放和加载指示器:

.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed

曲目的CSS属性

height
相应轨道的高度。
background-color
相应轨道的颜色。

以下CSS类选择器控制旋钮:

.s7videoviewer .s7videoscrubber .s7knob

旋钮的CSS属性

顶端
垂直旋钮偏移。
width
旋钮宽度。
height
旋钮高度。
background-image
旋钮图稿。
background-position

如果使用CSS sprite,则定位在图稿sprite内。

参见 CSS脚本.

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

.s7videoviewer .s7videoscrubber .s7videotime

播放时间泡的CSS属性

font-family
用于时间显示文本的字体系列。
font-size
用于时间显示文本的字体大小。
color
用于时间显示文本的字体颜色。
width
气泡区域宽度。
height
气泡区域高度。
填充
气泡区域填充。
background-image
气泡图稿。
background-position

如果使用CSS sprite,则定位在图稿sprite内。

参见 CSS脚本.

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

width
视频章节标记宽度。
height
视频章节标记高度。
background-image
视频章节标记图稿。
background-position

如果使用CSS sprite,则定位在图稿sprite内。

参见 CSS脚本.

NOTE
此按钮同时支持 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属性

max-width
视频章节气泡的最大宽度。
底部
与视频洗刷轨道的垂直偏移。

示例 — 设置一个宽为235像素、距视频洗刷轨道底部向上八像素的视频章节气泡。

.s7videoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}

视频章节气泡由一个可选的标题和内容组成。 标头具有可选的章节开始时间和章节标题。

标头由以下CSS类选择器控制:

.s7videoviewer .s7videoscrubber .s7chapter .s7header

视频章节气泡标题的CSS属性

height
视频章节泡标题高度。
填充
视频章节气泡标题文本的内部填充。
background-color
视频章节气泡标题背景颜色。
line-height
视频章节气泡标题文本行高度。

示例 — 设置高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属性

color
文本颜色。
font-weight
字体粗细。
font-size
字体大小.
font-family
字体系列。
右侧填充
开始时间和章节标题之间的边距。

示例 — 使用灰色10像素Verdana字体设置章节开始时间,且右侧有10像素填充。

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

color
视频章节标题文本颜色。
font-weight
视频章节标题字体粗细。
font-size
视频章节标题字体大小。
font-family
视频章节标题字体系列。

示例 — 设置使用白色、粗体、十像素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属性

color
视频章节描述文本颜色。
background-color
视频章节描述背景颜色。
font-weight
视频章节描述字体粗细。
font-size
视频章节描述字体大小。
font-family
视频章节描述字体系列。
line-height
视频章节描述行高。
填充
视频章节描述内边距。

示例 — 使用深灰色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属性

border-color

楔形连接器的颜色。

定义为 <color> 透明 以便仅定义顶部边框颜色,而其余边框保持透明。

border-width

楔形连接器宽度。

定义为 <width> <width> 0 因此,仅为顶部边框和水平边框定义相同的宽度,而底部边框宽度为 0 .

margin
仅定义负下边距。 它应具有与相同的值 border-width .

示例 — 设置灰色、6像素楔形连接器:

.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8