可變音量

最後更新： 2024年7月22日

主題：

建立對象：

開發人員
使用者

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

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

可變磁碟區區域的外觀是由下列CSS類別選取器所控制：

.s7videoviewer .s7mutablevolume

可變磁碟區的 CSS屬性

前	上邊框的位置，包括邊框間距。
右	從右邊框定位，包括內距。
寬度	可變音量控制的寬度。
高度	可變音量控制項的高度。
背景色彩	可變音量控制的色彩。

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

.s7videoviewer .s7mutablevolume .s7mutebutton

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

按鈕影像的 CSS屬性

背景影像

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

背景位置

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

請參閱 CSS Sprite。

NOTE

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

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

.s7videoviewer .s7mutablevolume .s7verticalvolume

垂直磁碟區列區域的 CSS屬性

背景色彩

垂直體積塊的背景顏色。

寬度

垂直體積塊的寬度。

高度

垂直體積塊的高度。

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

.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

垂直音量控制項的 CSS屬性

背景色彩

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

寬度

垂直音量控制項的寬度。

高度

垂直音量控制項的高度。

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

.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob

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

背景影像

垂直音量控制旋鈕圖稿。

背景位置

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

請參閱 CSS Sprite。

寬度

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

高度

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

已離開

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

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

範例

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

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

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

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

以下範例說明如何自訂視訊播放器，以便在播放期間停用音效。將下列程式碼新增至檢視器的內嵌程式碼：

                "handlers":{
                    "initComplete":function() {
                        videoViewer.getComponent("mutableVolume").setPosition(0);
                        videoViewer.getComponent("mutableVolume").deactivate();
                    }
                }

在上述程式碼範例中，mutableVolume元件上的磁碟區層級設定為0。然後，同一元件會停用，因此一般使用者不能使用。

recommendation-more-help