可变音量

可静音音量控制最初显示为按钮，用户可使用此按钮将视频播放器声音静音或取消静音。

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

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

.s7video360viewer .s7mutablevolume

可变卷的CSS属性

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

.s7video360viewer .s7mutablevolume .s7mutebutton

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

按钮图像的CSS属性

垂直音量栏区域由以下CSS类选择器控制：

.s7video360viewer .s7mutablevolume .s7verticalvolume

垂直体积条区域的CSS属性

垂直音量控件内的音轨由以下CSS类选择器控制：

.s7video360viewer .s7mutablevolume .s7verticalvolume .s7track
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7filledtrack

垂直音量控件内音轨的CSS属性

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

.s7video360viewer .s7mutablevolume .s7verticalvolume .s7knob

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

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

示例 — 设置静音按钮，该按钮距离顶部6像素，距离控制栏右边缘38像素，大小为32 x 32像素。 选择或未选择时，为四种不同的按钮状态分别显示不同的图像。

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

下面是如何在可变音量控制中设置音量滑块的样式的示例。

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