行动动员

视频结束时,“行动动员”面板会显示,并显示与特定视频关联的所有交互式色板。

该面板由显示视频标题的标题区域、右上角的重播按钮以及显示为可滚动网格的实际交互式样本组成。 您可以使用callToActionRecap配置属性禁用该面板。

“行动动员”面板始终包含整个可用的查看器区域。

以下CSS类选择器控制“行动动员”面板中背景颜色的外观:

.s7interactivevideoviewer .s7calltoaction

行动动员面板背景颜色的CSS属性

背景颜色

行动动员面板的背景颜色。

示例

要设置具有深灰色背景的行动动员面板,请执行以下操作:

.s7interactivevideoviewer .s7calltoaction {
    background-color: #222222;
}

以下CSS类选择器控制标题在行动动员面板中的外观:

.s7interactivevideoviewer .s7calltoaction .s7header

操作调用面板标题的CSS属性

背景颜色

标题的背景颜色。

height

标题的高度。

border-bottom

标题的下边框。

示例

要设置高度为70像素的标头,其背景为深灰色,底部的两个像素边框略为浅灰色:

.s7interactivevideoviewer .s7calltoaction .s7header {
    height: 70px;
    border-bottom: 2px solid #444444;
    background-color: #222222;
}

以下CSS类选择器控制在行动动员面板中标题的外观:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

行动动员面板中标题的CSS属性:

color

横幅中的文本颜色。

字体大小

字体大小.

行高

行高。

字体系列

字体系列。

text-align

横幅中文本的对齐方式。

左边距

左边距。

内边距 — 右边距

用于为重播按钮留出空间的右边距。

示例

要设置具有70像素行高、25像素字体大小、白色和左对齐的视频标题,请执行以下操作:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
    line-height: 70px;
    font-size: 25px;
    color: #ffffff;
    text-align: left;
}

以下CSS类选择器控制“行动动员”面板中关闭按钮的外观:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

行动动员面板中关闭按钮的CSS属性:

顶端

从标题顶部的位置,包括内边距。

标题右侧的位置,包括内边距。

width

按钮宽度。

高度

按钮高度。

背景图像

为给定按钮状态显示的图像。

背景位置

在图稿快照集内放置(如果使用CSS快照)。

请参阅 CSS Sprite

注意

此按钮支持state属性选择器,该选择器可用于将不同的外观应用到不同的按钮状态。

示例

设置28 x 28像素的重播按钮。 按钮必须距标题顶部和右边缘20像素。 而且,它必须针对四个不同的按钮状态中的每个状态显示一个不同的图像;从组件的sprite图像中获取图稿:

.s7interactivevideoviewer .s7calltoaction .s7closebutton {
 top: 20px;
 right: 20px;
 background-size: 336px;
 width: 28px;
 height: 28px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] {
 background-image: url(images/v2/PlayPauseButton_sprite.png);
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] {
 background-position: -28px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] {
 background-position: -0px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] {
 background-position: -28px -1232px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] {
 background-position: -0px -1232px;
}

以下CSS类选择器控制在行动动员面板中缩略图网格视图的外观:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

行动动员面板中缩略图网格视图的CSS属性:

背景颜色

缩略图区域的背景颜色。

示例

要设置具有深灰色背景的缩略图区域,请执行以下操作:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
    background-color: #222222;
}

以下CSS类选择器控制“行动动员”面板中缩览图单元格的外观:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

行动动员面板中缩览图单元格的CSS属性:

margin

每个缩略图周围的水平和垂直边距的大小。

实际水平缩略图间距等于为 .s7thumbcell 设置的左边距和右边距的和。 同样的规则也适用,但适用于垂直间距。

示例

要设置24像素的水平间距和18像素的垂直间距,请执行以下操作:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
 margin-top: 9px;
 margin-bottom: 9px;
 margin-left: 12px;
 margin-right: 12px;
}

以下CSS类选择器控制在行动动员面板中缩略图的外观:

.s7interactivevideoviewer .s7calltoaction .s7thumb

行动动员面板中缩略图的CSS属性:

宽度

缩略图的宽度。

高度

缩略图的高度。

边界

缩略图的边框。

注意

缩略图支持state属性选择器,该选择器可用于将不同的外观应用到不同的缩略图状态。 特别是,state="selected"对应于当前选定图像的缩略图;state="default"对应其余缩略图;state="over"用于鼠标悬停。

示例

要设置94 x 100像素的缩略图,请执行以下操作:

.s7interactivevideoviewer .s7calltoaction .s7thumb {
 width:94px;
 height:100px;
}

以下CSS类选择器控制在行动动员面板中缩略图标签的外观:

.s7interactivevideoviewer .s7calltoaction .s7label

行动动员面板中缩略图标签的CSS属性:

颜色

标签的文本颜色。

text-align

标签的水平对齐方式。

字体系列

字体名称。

字体大小

字体系列。

示例

要设置使用白色的标签,请居中对齐15像素,并使用Arial®字体:

.s7interactivevideoviewer .s7calltoaction .s7label {
 text-align: center;
 color: #ffffff;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 15px;
}

如果缩览图的缩览图数量超过垂直可查看缩略图数量,则缩览图会在右侧呈现垂直滚动条。 默认情况下,“行动动员”面板会呈现一个没有拇指和滚动按钮的小垂直条。 但是,可以通过更改查看器CSS来自定义栏。

以下CSS类选择器控制操作调用面板中滚动条区域的外观:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

行动动员面板中滚动条区域的CSS属性:

宽度

滚动条的宽度。

顶端

垂直滚动条与缩略图区域顶部的偏移。

底部

垂直滚动条与缩览图区域底部的偏移。

缩略图区域右边缘的水平滚动条偏移。

示例

要设置宽度为22像素的滚动条,并且该滚动条与缩略图区域的顶部、右侧或底部之间没有任何边距:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:22px;
}

滚动条轨道是顶部和底部滚动条按钮之间的区域。 该组件会自动设置轨道的位置和高度。

以下CSS类选择器控制操作调用面板中滚动条轨道的外观:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

滚动跟踪栏的CSS属性

宽度

滚动跟踪栏的宽度。

背景颜色

跟踪栏的背景颜色。

示例

要设置宽度为22像素且颜色为灰色的滚动条轨道,请执行以下操作:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:22px;
 background-color:#222222;
}

滚动条拇指在滚动轨道区域内垂直移动。 其垂直位置完全由组件逻辑控制;但是,缩览图高度不会根据内容的数量动态更改。

以下CSS类选择器控制缩览图高度和其他方面的外观:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

行动动员面板中缩览图高度的CSS属性:

宽度

拇指宽度。

高度

拇指高度。

padding-top

轨道顶部之间的垂直边距。

padding-bottom

轨道底部之间的垂直边距。

边框半径

边框半径。

背景颜色

拇指的颜色。

背景图像

为给定的拇指状态显示的图像。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

请参阅 CSS Sprite

注意

缩览图支持state属性选择器,该选择器可用于对以下不同的缩览图状态应用不同的外观:"up""down""over""disabled"

示例

要设置6 x 167像素、三个像素圆角和灰色的滚动条缩览图,请执行以下操作:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
 width:6px;
 height:167px;
 background-color:#666666;
 background-image:none;
 border-radius:3px 3px 3px 3px;
}

以下CSS类选择器控制顶部和底部滚动按钮的外观:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

无法使用CSS top、left、bottom或right属性定位滚动按钮;查看器逻辑会自动定位它们。 交互式视频查看器中的“行动动员”面板在滚动条中不使用这些按钮,因此在默认CSS中,它们的大小将设置为0像素。

“操作调用”面板中顶部和底部滚动按钮的CSS属性:

宽度

按钮宽度。

高度

按钮高度。

背景图像

为给定按钮状态显示的图像。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

请参阅 CSS Sprite

注意

这些按钮支持state属性选择器,该选择器可用于将不同的外观应用于以下不同的拇指状态:"up""down""over""disabled"

可以对按钮工具提示进行本地化。 请参阅用户界面元素的本地化

示例

通过将滚动按钮的大小设置为0并隐藏按钮,可禁用滚动按钮:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}

在此页面上