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:

.s7videoviewer .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:

.s7videoviewer .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:

.s7videoviewer .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:

.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track 
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

CSS-Eigenschaften der Steuerung des vertikalen Volumens

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:

.s7videoviewer .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.

.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); 
}

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.

.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); 
}

Im Folgenden sehen Sie ein Beispiel dafür, wie Sie den Videoplayer so anpassen können, dass der Ton während der Wiedergabe deaktiviert wird. hinzufügen den folgenden Code in den Einbettungscode des Viewers:

                "handlers":{ 
                    "initComplete":function() { 
                        videoViewer.getComponent("mutableVolume").setPosition(0); 
                        videoViewer.getComponent("mutableVolume").deactivate(); 
                    } 
                }

Im obigen Codebeispiel wird die Lautstärke auf 0 für die mutableVolume-Komponente eingestellt. Dann wird dieselbe Komponente deaktiviert, sodass sie vom Endbenutzer nicht verwendet werden kann.

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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