可变卷

可变音量控件最初显示为一个按钮，允许用户将智能裁剪视频播放器的声音静音或取消静音。

当用户滚动按钮时，会显示一个滑块，允许用户设置音量。 可变音量控件可以通过CSS相对于包含它的控制栏进行大小调整、外观设置和定位。

可变卷区域的外观由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7mutablevolume

可变卷的CSS属性

顶端

从上边框的位置，包括内边距。

右

从右边框的位置，包括内边距。

width

可变音量控件的宽度。

height

可变音量控制的高度。

背景颜色

可变音量控件的颜色。

通过以下CSS类选择器控制静音/取消静音按钮的外观：

.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton

您可以控制每个按钮状态的背景图像。 按钮的大小继承自卷控件的大小。

按钮图像的CSS属性

背景图像

为给定按钮状态显示的图像。

背景位置

在图稿Sprite中放置（如果使用CSS Sprite）。

请参阅 CSS Sprite .

注意

此按钮支持 state 和 selected 属性选择器，可用于将不同的外观应用于不同的按钮状态。 特别是， selected='true' 对应于“静音”状态和 selected='false' 对应于“未静音”状态。

使用以下CSS类选择器控制垂直音量条区域：

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume

垂直卷条区域的CSS属性

背景颜色

垂直音量的背景颜色。

宽度

垂直体积块的宽度。

高度

垂直体积的高度。

垂直卷控件内的跟踪通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

垂直卷控件的CSS属性

背景颜色

垂直音量控件的背景颜色。

宽度

垂直音量控制的宽度。

高度

垂直音量控制的高度。

通过以下CSS类选择器控制垂直音量旋钮：

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7knob

垂直音量控制旋钮的CSS属性

背景图像

垂直音量控制旋钮图稿。

背景位置

在图稿Sprite中放置（如果使用CSS Sprite）。

请参阅 CSS Sprite .

宽度

垂直音量控制旋钮的宽度。

高度

垂直音量控制旋钮的高度。

左侧

垂直音量控制旋钮的水平位置。

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

示例

要设置一个静音按钮，该按钮为32 x 32像素，距顶部6像素，距控制栏右边缘38像素。 选择或未选择时，针对四个不同按钮状态中的每个状态显示不同的图像。

.s7smartcropvideoviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}

以下示例说明了如何在可变音量控件中设置音量滑块的样式。

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}

以下示例说明了如何自定义视频播放器，以便在播放过程中禁用声音。 将以下代码添加到查看器的嵌入代码中：

                "handlers":{
                    "initComplete":function() {
                        videoViewer.getComponent("mutableVolume").setPosition(0);
                        videoViewer.getComponent("mutableVolume").deactivate();
                    }
                }

在上述代码示例中，卷级别设置为 0 在 mutableVolume 组件。 然后，同一组件将被停用，因此最终用户无法使用该组件。

在此页面上