可變音量

可變音量控制項最初顯示為按鈕，允許用戶將視頻播放器聲音靜音或取消靜音。

當用戶翻過按鈕時，會出現一個滑桿，允許用戶設定音量。 可變體積塊控制項可由CSS相對於包含它的控制欄進行大小、外觀和定位。

可變卷區域的外觀由以下CSS類選擇器控制：

.s7mixedmediaviewer .s7mutablevolume

可變卷的CSS屬性

靜音/取消靜音按鈕外觀由下列CSS類別選取器控制：

.s7mixedmediaviewer .s7mutablevolume .s7mutebutton

您可以控制每個按鈕狀態的背景影像。 按鈕的大小繼承自卷控制項的大小。

按鈕影像的CSS屬性

垂直卷條區域由以下CSS類選擇器控制：

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume

垂直卷條區域的CSS屬性

垂直卷控制項內的軌道由以下CSS類選擇器控制：

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track 
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

垂直卷控制項的CSS屬性

垂直音量旋鈕由以下CSS類選擇器控制：

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob

垂直音量控制旋鈕的CSS屬性

按鈕工具提示可以本地化。 如需詳細資訊，請參閱使用者介面元素本地化 。

範例

設定32 x 32像素的靜音按鈕，從頂部放置6像素，從控制條的右邊設定38像素。 選取或未選取時，針對四個不同按鈕狀態中的每一個顯示不同的影像。

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

下面是如何在可變音量控制項中設定音量滑塊樣式的示例。

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