Volume en sourdine

Dernière mise à jour : 2022-01-26
  • Créé pour :
  • Developer
    User

La commande de volume modifiable s’affiche initialement sous la forme d’un bouton qui permet à l’utilisateur de mettre en sourdine le son du lecteur vidéo.

Lorsqu’un utilisateur survole le bouton, un curseur s’affiche pour permettre à l’utilisateur de définir le volume. Le contrôle du volume modifiable peut être dimensionné, peint et positionné, par rapport à la barre de contrôle qui le contient, par CSS.

L’aspect de la zone de volume modifiable est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7mixedmediaviewer .s7mutablevolume

Propriétés CSS du volume modifiable

haut

Position à partir de la bordure supérieure, y compris la marge intérieure.

droite

Position à partir de la bordure droite, y compris la marge intérieure.

width

Largeur de la commande de volume modifiable.

height

Hauteur de la commande de volume modifiable.

arrière-plan-couleur

Couleur de la commande de volume modifiable.

L’aspect du bouton silencieux/non muté est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7mixedmediaviewer .s7mutablevolume .s7mutebutton

Vous pouvez contrôler l’image d’arrière-plan de chaque état de bouton. La taille du bouton est héritée de la taille de la commande de volume.

Propriétés CSS de l’image de bouton

background-image

Image affichée pour un état de bouton donné.

arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir Sprites CSS .

REMARQUE

Ce bouton prend en charge les deux state et selected sélecteurs d’attributs, qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton. En particulier, selected='true' correspond à l’état “muté” et selected='false' correspond à l’état “non muté”.

La zone de la barre de volume verticale est contrôlée avec le sélecteur de classe CSS suivant :

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume

Propriétés CSS de la zone de la barre de volume verticale

arrière-plan-couleur

Couleur d’arrière-plan du volume vertical.

width

Largeur du volume vertical.

height

Hauteur du volume vertical.

Le suivi à l’intérieur du contrôle de volume vertical est contrôlé à l’aide des sélecteurs de classe CSS suivants :

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7track
.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

Propriétés CSS du contrôle de volume vertical

arrière-plan-couleur

Couleur d’arrière-plan de la commande de volume vertical.

width

Largeur de la commande de volume vertical.

height

Hauteur de la commande verticale du volume.

Le bouton de volume vertical est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7mixedmediaviewer .s7mutablevolume .s7verticalvolume .s7knob

Propriétés CSS du bouton de contrôle du volume vertical

background-image

Illustration du bouton de contrôle du volume vertical.

arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir Sprites CSS .

width

Largeur du bouton de contrôle du volume vertical.

height

Hauteur du bouton de contrôle du volume vertical.

gauche

Position horizontale du bouton de contrôle du volume vertical.

L’info-bulle de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemples

Pour configurer un bouton silencieux de 32 x 32 pixels et positionné 6 pixels à partir du haut, et 38 pixels à partir du bord droit de la barre de contrôle. Afficher une image différente pour chacun des quatre états de bouton différents lorsqu’il est sélectionné ou non.

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

Vous trouverez ci-dessous un exemple de style du curseur de volume dans la commande de volume modifiable.

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

Sur cette page