可變音量

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

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

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

.s7video360viewer .s7mutablevolume

可變卷的CSS屬性

頂部

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

右側

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

width

可變音量控制的寬度。

height

可變體積控制項的高度。

背景顏色

可變音量控制項的顏色。

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

.s7video360viewer .s7mutablevolume .s7mutebutton

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

按鈕影像的CSS屬性

背景 — 影像

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

背景位置

如果使用CSS精靈，則位於圖稿精靈內。

請參閱 CSS Sprites 。

注意

此按鈕同時支援state和selected屬性選擇器，它們可用於將不同的外觀應用於不同的按鈕狀態。 具體來說，selected='true'對應於「靜音」狀態，而selected='false'對應於「未靜音」狀態。

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

.s7video360viewer .s7mutablevolume .s7verticalvolume

垂直卷條區域的CSS屬性

背景顏色

垂直體積塊的背景顏色。

寬度

垂直體積塊的寬度。

高度

垂直體積的高度。

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

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

垂直卷控制項內跟蹤的CSS屬性

背景顏色

垂直音量控制項的背景顏色。

寬度

垂直音量控制的寬度。

高度

垂直音量控制的高度。

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

.s7video360viewer .s7mutablevolume .s7verticalvolume .s7knob

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

背景 — 影像

垂直音量控制旋鈕圖稿。

背景位置

如果使用CSS精靈，則位於圖稿精靈內。

請參閱 CSS Sprites 。

寬度

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

高度

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

左側

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

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

範例 — 設定靜音按鈕，該按鈕為32 x 32像素，從上方放置6像素，從控制列的右邊放置38像素。選取或未選取時，針對四個不同按鈕狀態中的每一個顯示不同的影像。

.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);
}

本頁內容