视频洗涤器

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

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

示例 — 设置一个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字体和浅灰色背景来设置视频章节描述，请执行以下操作：五像素行高、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属性

示例 — 要设置灰色的六像素楔形连接器，请执行以下操作：

.s7interactivevideoviewer .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 Auto Text Summarization Style System Web Content Management Digital Rights Management Headless Cms