可變音量
最後更新: 2024年7月22日
建立對象:
- 開發人員
- 使用者
可靜音的音量控制一開始會顯示為一個按鈕,讓使用者將視訊播放器聲音設為靜音或取消靜音。
當使用者滑過按鈕時,會出現一個滑桿,讓使用者設定音量。 可變動的音量控制項可以由CSS相對於包含它的控制列來調整大小、外觀和定位。
可變磁碟區區域的外觀是由下列CSS類別選取器所控制:
.s7videoviewer .s7mutablevolume
可變磁碟區的 CSS屬性
前 | 上邊框的位置,包括邊框間距。 |
右 | 從右邊框定位,包括內距。 |
寬度 | 可變音量控制的寬度。 |
高度 | 可變音量控制項的高度。 |
背景色彩 | 可變音量控制的色彩。 |
靜音/取消靜音按鈕外觀由以下CSS類別選取器控制:
.s7videoviewer .s7mutablevolume .s7mutebutton
您可以控制每個按鈕狀態的背景影像。 按鈕的大小繼承自磁碟區控制項的大小。
按鈕影像的 CSS屬性
背景影像 | 針對指定按鈕狀態顯示的影像。 |
背景位置 |
若使用CSS拼寫,則定位在圖稿sprite內。 請參閱 CSS Sprite。 |
此按鈕同時支援
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
b7426f53-aad9-4c00-83fc-664f30f681e8