视频洗涤器

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

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

示例 — 使用灰色十像素Verdana字体设置章节开始时间，其右侧有十个像素内边距。

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

示例 — 要设置灰色的六像素楔形连接器：

.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