可變卷

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

當使用者在按鈕上滑動時,會出現滑桿,讓使用者設定音量。 可變的音量控制項可由CSS調整大小、改變外觀,並相對於包含它的控制列定位。

可使用下列CSS類別選取器來控制可變體積塊區域的外觀:

.s7videoviewer .s7mutablevolume

可變卷的CSS屬性

頂部

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

右側

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

width

可變體積塊控制的寬度。

height

可變體積塊控制的高度。

背景色

可變體積塊控制項的顏色。

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

.s7videoviewer .s7mutablevolume .s7mutebutton

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

按鈕影像的CSS屬性

背景影像

顯示給定按鈕狀態的影像。

背景位置

如果使用CSS精靈,請放在圖稿精靈內。

請參閱 CSS精靈

注意

此按鈕同時支援stateselected屬性選擇器,可用來將不同的外觀套用至不同的按鈕狀態。 尤其是,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精靈,請放在圖稿精靈內。

請參閱 CSS精靈

寬度

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

高度

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

左側

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

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

範例

若要設定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。 然後,相同的元件會停用,因此使用者無法使用。

本頁內容