行动动员 call-to-action

“行动号召”面板在视频结束时显示,并显示与特定视频相关的所有交互式样本。

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

“行动号召”面板始终采用整个可用查看器区域。

以下CSS类选择器控制动作调用面板中背景颜色的外观:

.s7interactivevideoviewer .s7calltoaction

行动号召面板的背景颜色的CSS属性 css-properties-of-the-background-color-of-the-call-to-action-panel

background-color
行动号召面板的背景颜色。

示例 example

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

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

以下CSS类选择器控制行动号召面板中标头的外观:

.s7interactivevideoviewer .s7calltoaction .s7header

行动号召面板标题的CSS属性 css-properties-of-the-call-to-action-panel-header

background-color
标题的背景颜色。
height
页眉的高度。
下边框
标头的下边框。

示例 example-1

要设置一个高度为70像素的标题,该标题具有深灰色背景,底部具有略浅灰色的两个像素边框:

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

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

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

行动号召面板中标题标题的CSS属性: css-properties-of-the-header-title-in-the-call-to-action-panel

color
横幅中的文本颜色。
font-size
字体大小.
line-height
行高。
font-family
字体系列。
text-align
横幅中文本的对齐方式。
左侧填充
左侧填充。
右侧填充
右内边距,为“重放”按钮留出空间。

示例 example-2

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

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

以下CSS类选择器可控制动作调用面板中关闭按钮的外观:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

行动号召面板中关闭按钮的CSS属性: css-properties-of-the-close-button-in-the-call-to-action-panel

顶端
从标题顶部开始放置,包括填充。
从标题右侧的位置,包括填充。
width
按钮宽度。
height
按钮高度。
background-image
针对给定按钮状态显示的图像。
background-position

如果使用CSS sprite,则定位在图稿sprite中。

参见 CSS脚本.

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

示例 example-3

要设置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属性: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel

background-color
缩略图区域的背景颜色。

示例 example-4

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

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

以下CSS类选择器可控制行动号召面板中缩略图单元格的外观:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

行动号召面板中缩略图单元格的CSS属性: css-properties-of-the-thumbcell-in-the-call-to-action-panel

margin

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

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

示例 example-5

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

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

以下CSS类选择器可控制“行动号召”面板中缩略图的外观:

.s7interactivevideoviewer .s7calltoaction .s7thumb

行动号召面板中缩略图的CSS属性: css-properties-of-the-thumbnail-in-the-call-to-action-panel

width
缩略图的宽度。
height
缩略图的高度。
边界
缩略图的边框。
NOTE
缩略图支持 state 属性选择器,可用于将不同的外观应用于不同的缩略图状态。 特别是, state="selected" 与当前选定图像的缩略图相对应; state="default" 与其余缩略图相对应; state="over" 用于鼠标悬停。

示例 example-6

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

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

以下CSS类选择器控制“行动号召”面板中缩略图标签的外观:

.s7interactivevideoviewer .s7calltoaction .s7label

行动号召面板中缩略图标签的CSS属性: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

color
标签的文本颜色。
text-align
标签水平对齐方式。
font-family
字体名称。
font-size
字体系列。

示例 example-7

要设置使用白色的标签,请居中对齐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属性: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel

width
滚动条宽度。
顶端
垂直滚动条从缩略图区域顶部偏移。
底部
垂直滚动条从缩略图区域底部偏移。
水平滚动条从缩略图区域的右边缘偏移。

示例 example-8

要设置一个宽度为22像素的滚动条,并且该滚动条在缩略图区域的顶部、右侧或底部没有任何边距,请执行以下操作:

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

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

以下CSS类选择器控制行动号召面板中滚动条轨道的外观:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

滚动条的CSS属性 css-properties-of-the-scroll-track-bar

width
滚动条宽度。
background-color
轨道栏的背景颜色。

示例 example-9

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

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

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

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

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

行动号召面板中缩略图高度的CSS属性: css-properties-of-the-thumb-height-in-the-call-to-action-panel

width
缩略图宽度。
height
缩略图高度。
上内边距
轨道顶部之间的垂直边距。
底部填充
轨道底部之间的垂直边距。
border-radius
边框半径。
background-color
缩略图的颜色。
background-image
在给定缩略图状态下显示的图像。
background-position

如果使用CSS sprite,则定位在图稿sprite内。

参见 CSS脚本.

NOTE
缩略图支持 state 属性选择器,可用于将不同的外观应用于以下不同的缩略图状态: "up""down""over"、和 "disabled".

示例 example-10

要设置一个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属性: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

width
按钮的宽度。
height
按钮的高度。
background-image
针对给定按钮状态显示的图像。
background-position

如果使用CSS sprite,则定位在图稿sprite内。

参见 CSS脚本.

NOTE
这些按钮支持 state 属性选择器,可用于将不同的外观应用于以下不同的缩略图状态: "up""down""over"、和 "disabled".

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

示例 example-11

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

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8