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 définir 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 :
.s7interactivevideoviewer .s7mutablevolume
Propriétés CSS du volume mutable
L’aspect du bouton Silence/Son réactivé est contrôlé par le sélecteur de classe CSS suivant :
.s7interactivevideoviewer .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, 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 :
.s7interactivevideoviewer .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 :
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
Propriétés CSS de la piste à l’intérieur du contrôle vertical du volume
Le bouton de volume vertical est contrôlé par le sélecteur de classe CSS suivant :
.s7interactivevideoviewer .s7mutablevolume .s7verticalvolume .s7knob
Propriétés CSS du bouton de commande de 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 section-e8caea0a303c425a8a637c2a47c06355
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 lorsqu’il est sélectionné ou non sélectionné.
.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);
}
Voici un exemple de mise en forme du curseur de volume dans le contrôle de volume mutable.
.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);
}