Volume en sourdine

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 :

.s7video360viewer .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 :

.s7video360viewer .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 CSS Sprites .

REMARQUE

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' 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 :

.s7video360viewer .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 :

.s7video360viewer .s7mutablevolume .s7verticalvolume .s7track 
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7filledtrack

Propriétés CSS du suivi dans le 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 :

.s7video360viewer .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 CSS Sprites .

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 de silence de 32 x 32 pixels et positionné 6 pixels en haut, et de 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.

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

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

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

Sur cette page