Meerbaar volume mutable-volume
Het veranderbare volumeregelaar verschijnt aanvankelijk als knoop die een gebruiker het slimme gewas videospelergeluid laat dempen of dempen.
Wanneer een gebruiker de muis over de knop beweegt, wordt een schuifregelaar weergegeven waarmee de gebruiker het volume kan instellen. De veranderbare volumeregeling kan door CSS worden gerangschikt, worden geschilderd, en, met betrekking tot de controlebar worden geplaatst die het bevat.
De vormgeving van het veranderbare volumegebied wordt bepaald door de volgende CSS-klassenkiezer:
.s7smartcropvideoviewer .s7mutablevolume
CSS-eigenschappen van het veranderbare volume
De vormgeving van de knop dempen/dempen wordt bepaald door de volgende CSS-klassenkiezer:
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton
U kunt de achtergrondafbeelding voor elke knopstatus bepalen. De grootte van de knop wordt overgenomen van de grootte van de volumeregeling.
CSS-eigenschappen van de knopafbeelding
state
en selected
kenmerkkiezers, die kunnen worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden. Met name: selected='true'
komt overeen met de toestand “gedempt” en selected='false'
komt overeen met de status “unmuted”.Het verticale gebied van de volumebalk wordt bestuurd met de volgende CSS-klassenkiezer:
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume
CSS-eigenschappen van het verticale gebied van de volumebalk
De track binnen verticale volumeregeling wordt bestuurd met de volgende CSS-klassenkiezers:
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
CSS-eigenschappen van het verticale volumeregelaar
De verticale volumeknop wordt bestuurd met de volgende CSS-klassenkiezer:
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7knob
CSS-eigenschappen van de verticale volumeregelaar
De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .
Voorbeelden section-e8caea0a303c425a8a637c2a47c06355
U stelt een dempknop in van 32 x 32 pixels en 6 pixels van de bovenkant naar 38 pixels van de rechterrand van de besturingsbalk. Geef een andere afbeelding weer voor elk van de vier verschillende knopstatussen, al dan niet geselecteerd.
.s7smartcropvideoviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}
Hieronder ziet u hoe u de volumeschuifregelaar binnen het veranderbare volumeregelaar kunt opmaken.
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}
Hieronder ziet u hoe u de videospeler kunt aanpassen, zodat geluid tijdens het afspelen wordt uitgeschakeld. Voeg de volgende code toe aan de insluitcode van de viewer:
"handlers":{
"initComplete":function() {
videoViewer.getComponent("mutableVolume").setPosition(0);
videoViewer.getComponent("mutableVolume").deactivate();
}
}
In het bovenstaande codevoorbeeld wordt het volumeniveau ingesteld op 0
op de mutableVolume
component. Vervolgens wordt dezelfde component gedeactiveerd, zodat deze niet door de eindgebruiker kan worden gebruikt.