可變卷

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

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

本頁內容