Mutables Volume

Das Steuerelement für veränderliche Lautstärke wird zunächst als Schaltfläche angezeigt, mit der der Benutzer den Videoplayer-Sound stummschalten oder deaktivieren kann.

Wenn ein Benutzer den Mauszeiger über die Schaltfläche bewegt, wird ein Schieberegler angezeigt, mit dem der Benutzer die Lautstärke einstellen kann. Das veränderliche Lautstärkeregler kann relativ zur zugehörigen Steuerleiste durch CSS skaliert, geschliffen und positioniert werden.

Das Aussehen des Bereichs für veränderbare Lautstärke wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7mutablevolume

CSS-Eigenschaften des veränderlichen Volumens

Anfang

Position vom oberen Rand, einschließlich Auffüllung.

rechts

Position vom rechten Rand, einschließlich Auffüllung.

width

Die Breite der Steuerung des veränderlichen Volumens.

height

Die Höhe der Steuerung des veränderlichen Volumens.

background-color

Die Farbe der Lautstärkeregelung.

Die Darstellung der Schaltflächen "Stummschalten/Unmutieren"wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7mutablevolume .s7mutebutton

Sie können das Hintergrundbild für jeden Schaltflächenstatus steuern. Die Größe der Schaltfläche wird von der Größe der Lautstärkeregelung übernommen.

CSS-Eigenschaften des Schaltflächenbilds

background-image

Das für einen Schaltflächenstatus angezeigte Bild.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt sowohl die Attributselektoren state als auch selected, die verwendet werden können, um verschiedene Skins auf verschiedene Schaltflächenzustände anzuwenden. Insbesondere entspricht selected='true' dem Status "muted"und selected='false' dem Status “unmuted”.

Der Bereich für die vertikale Lautstärkenleiste wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume

CSS-Eigenschaften des Bereichs der vertikalen Lautstärkenleiste

background-color

Die Hintergrundfarbe des vertikalen Volumens.

width

Die Breite des vertikalen Volumens.

height

Die Höhe des vertikalen Volumens.

Die Gleise innerhalb der vertikalen Lautstärkeregelung wird mit den folgenden CSS-Klassenselektoren gesteuert:

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track 
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

CSS-Eigenschaften der Leiste innerhalb der Steuerung der vertikalen Lautstärke

background-color

Die Hintergrundfarbe der Steuerung des vertikalen Volumens.

width

Breite der Steuerung des vertikalen Volumens.

height

Höhe der vertikalen Lautstärkeregelung.

Der vertikale Lautstärkeregler wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob

CSS-Eigenschaften des Reglers für die Steuerung der vertikalen Lautstärke

background-image

Grafik mit vertikalem Lautstärkeregler.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe CSS-Sprites .

width

Breite des Reglers für die vertikale Lautstärke.

height

Höhe des vertikalen Lautstärkereglers.

links

Horizontale Position des vertikalen Lautstärkereglers.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiele

Um eine Stummschaltfläche mit 32 x 32 Pixel und einer Position von 6 Pixel von oben und 38 Pixel von der rechten Kante der Steuerleiste einzurichten. Zeigt ein anderes Bild für jeden der vier verschiedenen Schaltflächenzustände an, wenn diese ausgewählt sind oder nicht.

.s7interactivevideoviewer .s7mutablevolume { 
top:6px; 
right:38px; 
width:32px; 
height:32px; 
} 
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] { 
background-image:url(images/mute_up.png); 
} 
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] { 
background-image:url(images/mute_over.png); 
} 
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] { 
background-image:url(images/mute_down.png); 
} 
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] { 
background-image:url(images/mute_disabled.png); 
} 
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] { 
background-image:url(images/unmute_up.png); 
} 
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] { 
background-image:url(images/unmute_over.png); 
} 
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] { 
background-image:url(images/unmute_down.png); 
} 
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] { 
background-image:url(images/unmute_disabled.png); 
}

Im Folgenden sehen Sie ein Beispiel dafür, wie Sie den Lautstärkeregler innerhalb der Steuerung für veränderliche Lautstärke gestalten können.

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume { 
width:36px; 
height:83px; 
left:0px; 
background-color:#dddddd; 
} 
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track { 
top:11px; 
left:14px; 
width:10px; 
height:63px; 
background-color:#666666; 
} 
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack { 
width:10px; 
background-color:#ababab; 
} 
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob { 
width:18px; 
height:10px; 
left:9px; 
background-image:url(images/volumeKnob.png); 
}

Auf dieser Seite

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now