Veränderliches Volumen mutable-volume

Die veränderliche Lautstärkesteuerung wird zunächst als Schaltfläche angezeigt, mit der Benutzende den Smart-Crop-Video-Player-Ton stummschalten oder die Stummschaltung aufheben können.

Wenn ein(e) Benutzende® auf die Schaltfläche klickt, wird ein Schieberegler angezeigt, mit dem der Benutzer die Lautstärke einstellen kann. Die veränderliche Lautstärkeregelung kann über CSS in der Größe, der Haut und der Position relativ zur Kontrollleiste, in der sie enthalten ist, angepasst werden.

Das Erscheinungsbild des veränderlichen Volumenbereichs wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7smartcropvideoviewer .s7mutablevolume

CSS-Eigenschaften des veränderlichen Volumes

Das Erscheinungsbild der Schaltfläche Stummschaltung/Stummschaltung aufheben wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton

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

CSS-Eigenschaften des Schaltflächenbilds

Der vertikale Lautstärkebereich wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume

CSS-Eigenschaften des vertikalen Volumenleistenbereichs

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

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

CSS-Eigenschaften der vertikalen Lautstärkeregelung

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

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7knob

CSS-Eigenschaften des vertikalen Lautstärkereglers

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.

Beispiele section-e8caea0a303c425a8a637c2a47c06355

So richten Sie eine Stummschaltfläche ein, die 32 x 32 Pixel groß und 6 Pixel vom oberen und 38 Pixel vom rechten Rand der Steuerleiste entfernt positioniert ist. Für jeden der vier verschiedenen Schaltflächenzustände wird ein anderes Bild angezeigt, wenn ausgewählt oder nicht ausgewählt.

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

Im Folgenden finden Sie ein Beispiel dafür, wie Sie den Lautstärkeregler im veränderlichen Lautstärkeregler gestalten können.

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

Im Folgenden finden Sie ein Beispiel dafür, wie Sie den Video-Player so anpassen können, dass der Ton während der Wiedergabe deaktiviert wird. Fügen Sie den folgenden Code zum Einbettungs-Code des Viewers hinzu:

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

Im obigen Code-Beispiel wird der Lautstärkepegel auf der 0 auf mutableVolume festgelegt. Anschließend wird dieselbe Komponente deaktiviert, sodass sie vom Endbenutzer nicht mehr verwendet werden kann.