可變音量

可靜音音量控制最初會顯示為一個按鈕，讓使用者將視訊播放器聲音靜音或取消靜音。

當使用者將滑鼠移到按鈕上時，會出現一個滑桿，讓使用者可以設定音量。 可變音量控制項可以相對於包含它的控制列，由CSS來調整大小、外觀和定位。

可變體積塊區域的外觀由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7mutablevolume

可變磁碟區的CSS屬性

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

.s7interactivevideoviewer .s7mutablevolume .s7mutebutton

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

按鈕影像的CSS屬性

垂直音量列區域由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume

垂直體積塊列區域的CSS屬性

垂直音量控制內的音軌由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

垂直音量控制內音軌的CSS屬性

垂直音量旋鈕由下列CSS類別選取器控制：

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob

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

按鈕工具提示可以本地化。 另請參閱 使用者介面元素的本地化 以取得詳細資訊。

範例

若要設定靜音按鈕，其位置為32 x 32畫素，從上到下為6畫素，從控制列的右邊緣為38畫素。 選取或未選取時，針對四種不同按鈕狀態分別顯示不同的影像。

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

以下是如何在可變音量控制項中設定音量滑桿樣式的範例。

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