交互式样本 interactive-swatches
如果在配置中将交互式数据传递给查看器,则交互式样本面板将显示在视频内容旁边。 它由顶部的横幅组成,该横幅可渲染“单击查看”等文本、包含一个或多个交互式样本的列以及两个滚动按钮(仅在桌面系统上可用)。
在桌面系统和触控设备上,交互样本将以横向方式垂直渲染到视频内容的右侧。 在纵向的触控设备上,它们以水平一排样本的形式显示在查看器底部。
以下CSS类选择器控制交互式样本面板的位置和方向:
.s7interactivevideoviewer .s7interactiveswatches
交互式样本的CSS属性 css-properties-of-the-interactive-swatches
交互式样本面板的运行时位置和方向由上述CSS属性的组合定义,如下所示:
- 要在查看器底部水平渲染交互式样本,请将高度设置为绝对像素值;将左和底部设置为0像素;将宽度、右侧和顶部设置为自动。
- 要垂直渲染交互式样本到视频内容的右侧,请将宽度设置为绝对像素;将右和上设置为0像素;将高度设置为左和下设置为auto。
可以将CSS标记与此样式一起使用,以实现交互式样本面板的自适应放置。
示例 example
要设置交互式样本面板,以便在横向的触控设备上在查看器底部水平渲染。 此外,在所有其他情况下,要垂直显示在视频内容的右侧,请执行以下操作:
.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属性 css-properties-of-the-banner-panel
可以本地化横幅工具提示。 参见 用户界面元素的本地化 了解更多信息。
示例 section-e8caea0a303c425a8a637c2a47c06355
要设置具有深灰色背景、浅灰色双像素边框和白色文本水平居中的横幅,请执行以下操作:
.s7interactivevideoviewer .s7interactiveswatches .s7banner {
background-color: #222222;
border-bottom: 2px solid #444444;
color: #ffffff;
text-align: center;
}
以下CSS类选择器控制样本的外观:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches
样本区域的CSS属性 css-properties-of-the-swatches-area
示例 section-9cadd62a09fd44a280f55ff42437e416
要设置具有深灰色背景的样本区域,请执行以下操作:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
background-color: #222222;
}
以下CSS类选择器控制样本缩略图之间的间距:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell
样本缩略图间距的CSS属性 css-properties-of-the-swatches-thumbnail-spacing
示例 section-39fb270b7e494a9d99e6e8f6890ec53c
要将垂直间距设置为十像素,请执行以下操作:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
margin: 5px;
}
以下CSS类选择器控制各个缩略图的外观:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb
单个缩略图外观的CSS属性 css-properties-of-the-appearance-of-individual-thumbnails
state
属性选择器,可用于将不同的外观应用于不同的缩略图状态。 特别是, state="selected"
对应于当前选定图像的缩略图; state="default"
与其余缩略图相对应; state="over"
用于鼠标悬停。示例 section-69fec189ffaa440b97b6b846c320b75b
要设置100 x 75像素的缩略图,请执行以下操作:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
width:100px;
height:75px;
}
以下CSS类选择器控制缩略图标签的外观:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label
缩略图标签外观的CSS属性 css-properties-of-the-appearance-of-the-thumbnail-label
示例 section-eb141eb6c1154183baa69796edb90536
要设置标签以使用左对齐、白色、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属性 css-properties-of-the-appearance-of-the-up-and-down-scroll-buttons
state
属性选择器,可用于将不同的外观应用于按钮状态:'' up
“, ” down
“, ” over
“”和“” disabled
“。可对按钮工具提示进行本地化。 参见 用户界面元素的本地化 了解更多信息。
示例 section-e6ce4fa084b84288bc7583342b2c510c
要设置一个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; }