可變音量

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

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

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

.s7interactivevideoviewer .s7mutablevolume

可變磁碟區的CSS屬性

頂部

上邊框的位置，包括邊框間距。

右側

從右邊框定位，包括內距。

width

可變音量控制的寬度。

height

可變音量控制項的高度。

background-color

可變音量控制的色彩。

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

.s7interactivevideoviewer .s7mutablevolume .s7mutebutton

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

按鈕影像的CSS屬性

background-image

針對指定按鈕狀態顯示的影像。

background-position

若使用CSS sprite，則定位在圖稿sprite內。

另請參閱 CSS精靈 .

注意

此按鈕同時支援 state 和 selected 屬性選取器，可將不同的外觀元素套用至不同的按鈕狀態。 尤其是， selected='true' 對應至「靜音」狀態和 selected='false' 對應至「未靜音」狀態。

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

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume

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

background-color

垂直體積塊的背景顏色。

width

垂直體積塊的寬度。

height

垂直體積塊的高度。

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

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

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

background-color

垂直音量控制的背景色彩。

width

垂直音量控制的寬度。

height

垂直音量控制的高度。

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

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob

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

background-image

垂直音量控制旋鈕圖稿。

background-position

若使用CSS sprite，則定位在圖稿sprite內。

另請參閱 CSS精靈 .

width

垂直音量控制旋鈕的寬度。

height

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

左側

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

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

範例

若要設定靜音按鈕，其位置為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);
}

本頁內容