Volume en sourdine mutable-volume

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 :

.s7interactivevideoviewer .s7mutablevolume

Propriétés CSS du volume modifiable

top
Position à partir de la bordure supérieure, y compris la marge intérieure.
droit
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.
background-color
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 :

.s7interactivevideoviewer .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é.
background-position

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

Voir Sprites CSS.

NOTE
Ce bouton prend en charge les sélecteurs d’attributs state et selected, 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' à l’état “non muté”.

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

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume

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

background-color
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 :

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

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

background-color
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 :

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob

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

background-image
Illustration du bouton de contrôle du volume vertical.
background-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.
left
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 section-e8caea0a303c425a8a637c2a47c06355

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.

.s7interactivevideoviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7interactivevideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7interactivevideoviewer .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.

.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8