Volume en sourdine mutable-volume
Le contrôle du volume mutable apparaît initialement sous la forme d’un bouton qui permet à un utilisateur de désactiver ou de réactiver le son du lecteur vidéo.
Lorsqu’un utilisateur survole le bouton, un curseur s’affiche pour lui permettre de régler le volume. Le contrôle de volume mutable peut être dimensionné, skinné et positionné, par rapport à la barre de contrôle qui le contient, par CSS.
L’aspect de la zone de volume mutable est contrôlé par le sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7mutablevolume
Propriétés CSS du volume mutable
L’apparence du bouton de sourdine/réactiver le son est contrôlée par le sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7mutablevolume .s7mutebutton
Vous pouvez contrôler l’image d’arrière-plan pour chaque état de bouton. La taille du bouton est héritée de la taille du contrôle du volume.
Propriétés CSS de l’image du bouton
state et selected , qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton. En particulier, correspond selected='true' à l’état « muet » et selected='false' correspond à l’état « unmuted ».La zone verticale de la barre de volume est contrôlée à l’aide du sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume
Propriétés CSS de la zone de barre de volume verticale
La piste à l’intérieur du contrôle vertical du volume est contrôlée par les sélecteurs de classe CSS suivants :
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
Propriétés CSS du contrôle vertical du volume
Le bouton de volume vertical est contrôlé par le sélecteur de classe CSS suivant :
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob
Propriétés CSS du bouton de commande de volume vertical
L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.
Exemples section-e8caea0a303c425a8a637c2a47c06355
Pour définir un bouton de sourdine de 32 x 32 pixels et positionné à 6 pixels du haut et à 38 pixels du bord droit de la barre de contrôle. Affichez une image différente pour chacun des quatre états de bouton différents lorsqu’il est sélectionné ou non sélectionné.
.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);
}
Voici un exemple de mise en forme du curseur de volume dans le contrôle de volume mutable.
.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);
}