可變音量控制一開始會顯示為按鈕,讓使用者靜音或取消靜音視訊播放器音效。
當使用者在按鈕上滑動時,會出現滑桿,讓使用者設定音量。 可變的音量控制項可由CSS調整大小、改變外觀,並相對於包含它的控制列定位。
可使用下列CSS類別選取器來控制可變體積塊區域的外觀:
.s7video360viewer .s7mutablevolume
可變卷的CSS屬性
頂部 |
從上邊框的位置,包括間距。 |
右側 |
從右邊框定位,包括間距。 |
width |
可變體積塊控制的寬度。 |
height |
可變體積塊控制的高度。 |
背景色 |
可變體積塊控制項的顏色。 |
靜音/取消靜音按鈕的外觀由下列CSS類別選擇器控制:
.s7video360viewer .s7mutablevolume .s7mutebutton
您可以控制每個按鈕狀態的背景影像。 按鈕的大小繼承自卷控制的大小。
按鈕影像的CSS屬性
背景影像 |
顯示給定按鈕狀態的影像。 |
背景位置 |
如果使用CSS精靈,請放在圖稿精靈內。 請參閱 CSS精靈。 |
此按鈕同時支援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精靈。 |
寬度 |
垂直音量控制旋鈕的寬度。 |
高度 |
垂直音量控制旋鈕的高度。 |
左側 |
垂直音量控制旋鈕的水準位置。 |
按鈕工具提示可以本地化。 如需詳細資訊,請參閱使用者介面元素的本地化。
範例 -設定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);
}