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 :
.s7videoviewer .s7mutablevolume
Propriétés CSS du volume modifiable
L’aspect du bouton silencieux/non muté est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7videoviewer .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
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 :
.s7videoviewer .s7mutablevolume .s7verticalvolume
Propriétés CSS de la zone de la barre de volume verticale
Le suivi à l’intérieur du contrôle de volume vertical est contrôlé à l’aide des sélecteurs de classe CSS suivants :
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
Propriétés CSS de la commande de volume vertical
Le bouton de volume vertical est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob
Propriétés CSS du bouton de contrôle de 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.
.s7videoviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7videoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7videoviewer .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.
.s7videoviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}
Voici un exemple de la manière dont vous pouvez personnaliser le lecteur vidéo afin que le son soit désactivé pendant la lecture. Ajoutez le code suivant au code incorporé de la visionneuse :
"handlers":{
"initComplete":function() {
videoViewer.getComponent("mutableVolume").setPosition(0);
videoViewer.getComponent("mutableVolume").deactivate();
}
}
Dans l’exemple de code ci-dessus, le niveau de volume est défini sur 0 sur le composant mutableVolume. Ensuite, le même composant est désactivé afin qu’il ne puisse pas être utilisé par l’utilisateur final.