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

top
Placera från den övre kanten, inklusive utfyllnad.
höger
Placera från den högra kanten, inklusive utfyllnad.
width
Bredden på den ändringsbara volymkontrollen.
height
Höjden på den ändringsbara volymkontrollen.
background-color
Färgen på den ändringsbara volymkontrollen.

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

background-image
Bilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se CSS-fragment.

NOTE
Den här knappen har stöd för båda 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

background-color
Bakgrundsfärgen för den lodräta volymen.
width
Bredden på den lodräta volymen.
height
Höjden på den lodräta volymen.

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

background-color
Bakgrundsfärgen för den lodräta volymkontrollen.
width
Bredden på den lodräta volymkontrollen.
height
Höjden på 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

background-image
Lodrät volymkontroll - ratten.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se CSS-fragment.

width
Bredden på den lodräta volymkontrollknappen.
height
Höjden på den lodräta volymkontrollknappen.
vänster
Vågrät position 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å 0mutableVolume -komponenten. Sedan inaktiveras samma komponent så att den inte kan användas av slutanvändaren.

recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8