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:
.s7mixedmediaviewer .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:
.s7mixedmediaviewer .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 . |
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:
.s7mixedmediaviewer .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:
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track
.s7mixedmediaviewer .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:
.s7mixedmediaviewer .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.
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.
.s7mixedmediaviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7mixedmediaviewer .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.
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}