Muterbar volym mutable-volume
Inledningsvis visas den ändringsbara volymkontrollen som en knapp där användaren kan stänga av eller slå på ljudet i videospelaren.
När en användare rullar över knappen visas ett reglage som gör att användaren kan ställa in volymen. Den ändringsbara volymkontrollen kan storleksanpassas, skalas och placeras i förhållande till kontrollfältet som innehåller den av CSS.
Utseendet på området för den ändringsbara volymen styrs med följande CSS-klassväljare:
.s7videoviewer .s7mutablevolume
CSS-egenskaper för den ändringsbara volymen
Utseendet på knappen för att stänga av/slå på styrs av följande CSS-klassväljare:
.s7videoviewer .s7mutablevolume .s7mutebutton
Du kan styra bakgrundsbilden för varje knappläge. Knappens storlek ärvs från volymkontrollens storlek.
CSS-egenskaper för knappbilden
state
och selected
attributväljare, som kan användas för att tillämpa olika skal på olika knapplägen. I synnerhet selected='true'
motsvarar läget “muted” och selected='false'
motsvarar tillståndet “unmuted”.Det lodräta volymfältsområdet styrs med följande CSS-klassväljare:
.s7videoviewer .s7mutablevolume .s7verticalvolume
CSS-egenskaper för det lodräta volymfältsområdet
Spåret i den lodräta volymkontrollen styrs med följande CSS-klassväljare:
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
CSS-egenskaper för den lodräta volymkontrollen
Den lodräta volymknappen styrs med följande CSS-klassväljare:
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob
CSS-egenskaper för den lodräta volymkontrollknappen
Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.
Exempel section-e8caea0a303c425a8a637c2a47c06355
Om du vill ställa in en ljudavstängningsknapp som är 32 x 32 pixlar och placerad 6 pixlar från överkanten och 38 pixlar från kontrollfältets högra kant. Visa olika bilder för vart och ett av de fyra olika knapplägena när de är markerade eller inte markerade.
.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);
}
Följande är ett exempel på hur du kan formatera volymreglaget i den ändringsbara volymkontrollen.
.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);
}
Följande är ett exempel på hur du kan anpassa videospelaren så att ljud inaktiveras under uppspelning. Lägg till följande kod i visningsprogrammets inbäddningskod:
"handlers":{
"initComplete":function() {
videoViewer.getComponent("mutableVolume").setPosition(0);
videoViewer.getComponent("mutableVolume").deactivate();
}
}
I kodexemplet ovan är volymnivån inställd på 0
på mutableVolume
-komponenten. Sedan inaktiveras samma komponent så att den inte kan användas av slutanvändaren.