Volume mutable mutable-volume
La commande de volume modifiable apparaît initialement sous la forme d’un bouton qui permet à l’utilisateur de couper ou d’activer le son du lecteur vidéo.
Lorsqu’un utilisateur survole le bouton, un curseur s’affiche pour lui permettre de définir le volume. Le contrôle de volume modifiable peut être dimensionné, doté d'une enveloppe et positionné par rapport à la barre de contrôle qui le contient, à l'aide de CSS.
L’aspect de la zone de volume modifiable est contrôlé avec le sélecteur de classe CSS suivant :
.s7video360viewer .s7mutablevolume
Propriétés CSS du volume modifiable
L’aspect du bouton Silence/Son réactivé est contrôlé par le sélecteur de classe CSS suivant :
.s7video360viewer .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 de 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, selected='true' correspond à l'état « muted » et selected='false' correspond à l'état « unmuted ».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
La piste à l’intérieur du contrôle du volume vertical est contrôlée avec les sélecteurs de classe CSS suivants :
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7track
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7filledtrack
Propriétés CSS de la piste dans le contrôle du volume vertical
Le bouton de volume vertical est contrôlé avec le sélecteur de classe CSS suivant :
.s7video360viewer .s7mutablevolume .s7verticalvolume .s7knob
Propriétés CSS du bouton de réglage du volume vertical
L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Exemples - Pour configurer un bouton de désactivation du son 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, qu’ils soient sélectionnés 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);
}
Voici un exemple de mise en forme du curseur de volume dans le contrôle 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);
}