Veränderliches Volumen mutable-volume
Die veränderliche Lautstärkeregelung wird zunächst als Schaltfläche angezeigt, mit der ein Benutzer den Video-Player-Ton stummschalten oder die Stummschaltung aufheben kann.
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:
.s7video360viewer .s7mutablevolume
CSS-Eigenschaften des veränderlichen Volumes
Das Erscheinungsbild der Schaltfläche Stummschaltung/Stummschaltung aufheben wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7video360viewer .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
state- als auch den selected-Attributselektor, mit dem verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können. Insbesondere entspricht selected='true' dem Zustand „Stummschaltung“ und selected='false' dem Zustand „Stummschaltung“.Der vertikale Lautstärkebereich wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7video360viewer .s7mutablevolume .s7verticalvolume
CSS-Eigenschaften des vertikalen Volumenleistenbereichs
Die Spur innerhalb der vertikalen Lautstärkeregelung wird mit den folgenden CSS-Klassenselektoren gesteuert:
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7track
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7filledtrack
CSS-Eigenschaften der Spur innerhalb der vertikalen Lautstärkeregelung
Der vertikale Lautstärkeregler wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7video360viewer .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 - Zum Einrichten einer Stummschaltfläche, 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.
.s7video360viewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7video360viewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7video360viewer .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.
.s7video360viewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}