可變卷

可變音量控制一開始會顯示為按鈕，讓使用者靜音或取消靜音視訊播放器音效。

當使用者在按鈕上滑動時，會出現滑桿，讓使用者設定音量。 可變的音量控制項可由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); 
}