如果在配置中将交互式数据传递到查看器,则交互式样本面板会显示在视频内容旁边。 它由顶部的一个横幅组成,该横幅可呈现文本,如“点击查看”、一个或多个交互式色板的列以及两个滚动按钮(仅在桌面系统上可用)。
在桌面系统和触控设备上,交互式色板以横向方向垂直呈现在视频内容的右侧。 在以纵向方向显示的触控设备上,这些设备以水平行的色板形式显示在查看器底部。
以下CSS类选择器控制交互式色板面板的位置和方向:
.s7interactivevideoviewer .s7interactiveswatches
width |
交互式色板面板的宽度 |
height |
交互式色板面板的高度。 |
顶端 |
交互式色板面板的顶部位置。 |
底部 |
交互式色板面板的底部位置。 |
左侧 |
交互式色板面板的左侧位置。 |
右 |
交互式色板面板的右侧位置。 |
交互式色板面板的运行时位置和方向由上述CSS属性的组合定义,如下所示:
可以将此样式结合使用CSS标记,以实现交互式色板面板的自适应放置。
要设置一个交互式色板面板,以便在触控设备上在查看器底部以横向水平呈现。 此外,在所有其他情况下,要垂直显示视频内容的右侧,请执行以下操作:
.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
width:120px;
height:auto;
right:0px;
top:0px;
left:auto;
bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
width:auto;
height:136px;
right:auto;
top:auto;
left:0px;
bottom:0px;
}
横幅的大小和位置由交互式色板组件根据应用于CSS的其他样式来管理,并且无法进行显式设置。
以下CSS类选择器控制横幅面板的外观:
.s7interactivevideoviewer .s7interactiveswatches .s7banner
背景颜色 |
横幅面板的背景颜色。 |
color |
横幅面板内的文本颜色。 |
边界 |
横幅面板周围的边框。 |
字体粗细 |
用于横幅面板内文本的字体粗细。 |
字体大小 |
用于横幅面板内的文本的字体大小。 |
字体系列 |
用于横幅面板内文本的字体系列。 |
font-align |
用于横幅面板内文本的字体对齐方式。 |
可以对横幅工具提示进行本地化。 有关更多信息,请参阅用户界面元素的本地化 。
要设置具有深灰色背景、浅灰色两像素边框和水平居中白色文本的横幅,请执行以下操作:
.s7interactivevideoviewer .s7interactiveswatches .s7banner {
background-color: #222222;
border-bottom: 2px solid #444444;
color: #ffffff;
text-align: center;
}
以下CSS类选择器控制色板的外观:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches
背景颜色 |
色板区域的背景颜色。 |
要设置具有深灰色背景的色板区域,请执行以下操作:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
background-color: #222222;
}
以下CSS类选择器控制色板缩览图之间的间距:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell
margin |
每个缩略图周围的水平和垂直边距的大小。 实际缩略图间距等于为 .s7thumbcell 设置的左边距和右边距的和。 |
要将垂直间距设置为10像素,请执行以下操作:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
margin: 5px;
}
以下CSS类选择器控制单个缩略图的外观:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb
宽度 |
缩略图的宽度。 |
高度 |
缩略图的高度。 |
边界 |
缩略图的边框。 |
缩略图支持state
属性选择器,您可以使用该选择器将不同的外观应用到不同的缩略图状态。 尤其是state="selected"
对应于当前选定图像的缩略图;state="default"
对应其余缩略图;state="over"
用于鼠标悬停。
要设置100 x 75像素的缩略图,请执行以下操作:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
width:100px;
height:75px;
}
以下CSS类选择器控制缩略图标签的外观:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label
颜色 |
文本颜色. |
边界 |
标记边框。 |
text-align |
水平文本对齐方式。 |
字体系列 |
字体名称。 |
要设置标签以使用左对齐、白色、12像素、Helvetica®字体和下边框,请执行以下操作:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
border-bottom: 1px solid #e9e9e9;
text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}
以下CSS类选择器控制上下滚动按钮的外观:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton
.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton
无法使用CSS top
、left
、bottom
和right
属性定位滚动按钮;相反,查看器逻辑会自动定位它们。
宽度 |
滚动按钮的宽度。 |
高度 |
滚动按钮的高度。 |
背景图像 |
为给定按钮状态显示的图像。 |
背景位置 |
使用CSS Sprite时图稿Sprite内的位置。 另请参阅 CSS Sprite 。 |
此按钮支持state
属性选择器,您可以使用该选择器对按钮状态应用不同的外观:" up
"、" down
"、" over
"和" disabled
"。
可以对按钮工具提示进行本地化。 有关更多信息,请参阅用户界面元素的本地化 。
要设置60 x 36像素的向上滚动按钮,请为每个状态提供不同的图稿,并从组件的Sprite图像中获取该图稿:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
background-size: 120px;
width: 60px;
height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }