交互式色板

如果在配置中将交互式数据传递到查看器，则交互式样本面板会显示在视频内容旁边。 它由顶部的一个横幅组成，该横幅可呈现文本，如“点击查看”、一个或多个交互式色板的列以及两个滚动按钮（仅在桌面系统上可用）。

在桌面系统和触控设备上，交互式色板以横向方向垂直呈现在视频内容的右侧。 在以纵向方向显示的触控设备上，这些设备以水平行的色板形式显示在查看器底部。

以下CSS类选择器控制交互式色板面板的位置和方向：

.s7interactivevideoviewer .s7interactiveswatches

交互式色板的CSS属性

交互式色板面板的运行时位置和方向由上述CSS属性的组合定义，如下所示：

• 要在查看器底部水平渲染交互式色板，请将高度设置为绝对像素值；左和下到0px;宽度、右侧和从上到上的自动。
• 要在视频内容的右侧垂直渲染交互式色板，请将宽度设置为绝对像素；右上至0px;高度，从左到下到自动。

可以将此样式结合使用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

横幅面板的CSS属性

可以对横幅工具提示进行本地化。 有关更多信息，请参阅用户界面元素的本地化 。

示例

要设置具有深灰色背景、浅灰色两像素边框和水平居中白色文本的横幅，请执行以下操作：

.s7interactivevideoviewer .s7interactiveswatches .s7banner { 
    background-color: #222222; 
    border-bottom: 2px solid #444444; 
    color: #ffffff; 
    text-align: center; 
}

以下CSS类选择器控制色板的外观：

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

色板区域的CSS属性

示例

要设置具有深灰色背景的色板区域，请执行以下操作：

.s7interactivevideoviewer .s7interactiveswatches .s7swatches { 
    background-color: #222222; 
}

以下CSS类选择器控制色板缩览图之间的间距：

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

样本缩略图间距的CSS属性

示例

要将垂直间距设置为10像素，请执行以下操作：

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell { 
 margin: 5px; 
}

以下CSS类选择器控制单个缩略图的外观：

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb

单个缩略图外观的CSS属性

示例

要设置100 x 75像素的缩略图，请执行以下操作：

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb { 
 width:100px; 
 height:75px; 
}

以下CSS类选择器控制缩略图标签的外观：

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

缩略图标签外观的CSS属性

示例

要设置标签以使用左对齐、白色、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属性

可以对按钮工具提示进行本地化。 有关更多信息，请参阅用户界面元素的本地化 。

示例

要设置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; }