交互式色板

最近更新： 2024年7月20日
  • 主题：

创建对象：

  • 开发人员
  • 用户

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

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

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

.s7interactivevideoviewer .s7interactiveswatches

交互式样本的CSS属性

宽度交互式样本面板的宽度
高度交互式样本面板的高度。
前交互式样本面板的顶部位置。
后交互式样本面板的底部位置。
已离开交互式样本面板的左侧位置。
右交互式样本面板的右位置。

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

  • 要在查看器底部水平呈现交互式色板，请将高度设置为绝对像素值；将左右方向设置为0像素；将宽度方向设置为width方向，将右方向设置为top方向设置为auto方向。
  • 要垂直渲染交互式样本到视频内容的右侧，请将宽度设置为绝对像素；将右和上设置为0像素；将高度设置为“左”，将下设置为“自动”。

可以使用此样式的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属性

边距每个缩略图周围的水平和垂直边距的大小。 实际缩略图间距等于为 .s7缩略图单元格设置的左右边距之和。