视频洗刷 video-scrubber
视频洗刷是水平滑块控件，允许用户动态搜索到当前播放视频内的任何时间位置。
清理器“旋钮”也会在视频播放时移动，以指示视频在播放期间的当前时间位置。 视频清理器始终占据控制栏的全部宽度。 可以通过CSS为视频洗刷蒙皮并更改其高度和垂直位置。
视频清理器的常规外观由以下CSS类选择器控制：
.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob
视频清理器的 CSS属性
以下CSS类选择器跟踪背景、播放和加载指示器：
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed
曲目 的 CSS属性
以下CSS类选择器控制旋钮：
.s7interactivevideoviewer .s7videoscrubber .s7knob
旋钮的 CSS属性
以下CSS类选择器控制播放时间气泡：
.s7interactivevideoviewer .s7videoscrubber .s7videotime
播放时间泡泡的 CSS属性
可以本地化视频洗刷工具提示。 有关详细信息，请参阅用户界面元素的本地化。
示例 — 设置视频查看器，该查看器具有视频洗刷并且自定义的轨道颜色高度为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属性
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属性
示例 — 若要设置章节开始时间，请使用灰色10像素Verdana字体并在右侧填充10像素。
.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属性
示例 — 设置使用白色、粗体、10像素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属性
示例 — 要设置灰色、6像素楔形连接器：
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}