视频洗刷

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

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

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

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

视频清理器的CSS属性

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

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

曲目的CSS属性

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

.s7videoviewer .s7videoscrubber .s7knob

旋钮的CSS属性

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

.s7videoviewer .s7videoscrubber .s7videotime

播放时间泡的CSS属性

可以本地化视频洗刷工具提示。 参见 用户界面元素的本地化 了解更多信息。

示例 — 使用具有自定义跟踪颜色的视频清理器设置视频查看器。 清理器高度必须为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属性

示例 — 设置一个像素为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属性

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

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

示例 — 设置灰色、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;
}

Business.Adobe.com 资源

Ecommerce Integrations Customer Communications Asset Collections Personalized Communications Responsive Forms Dynamic Forms