La commande de volume mutable s'affiche initialement sous la forme d'un bouton qui permet à l'utilisateur de muter ou de désactiver le son du lecteur vidéo.
Lorsqu'un utilisateur survole le bouton, un curseur s'affiche, permettant à l'utilisateur de définir le volume. La commande de volume modifiable peut être dimensionnée, habillée et positionnée, par rapport à la barre de contrôle qui la contient, par CSS.
L'aspect de la zone de volume modifiable est contrôlé par le sélecteur de classe CSS suivant :
.s7videoviewer .s7mutablevolume
Propriétés CSS du volume modifiable
haut |
Position à partir de la bordure supérieure, y compris le remplissage. |
droite |
Position à partir de la bordure droite, y compris le remplissage. |
width |
Largeur de la commande de volume mutable. |
height |
Hauteur de la commande de volume mutable. |
arrière-plan-couleur |
Couleur de la commande de volume mutable. |
L’aspect du bouton de mise en sourdine 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 du contrôle de volume.
Propriétés CSS de l’image de bouton
image d’arrière-plan |
Image affichée pour un état de bouton donné. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir CSS Sprites . |
Ce bouton prend en charge les sélecteurs d'attribut 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 :
.s7videoviewer .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. |
hauteur |
Hauteur du volume vertical. |
Le suivi à l'intérieur du contrôle de volume vertical est contrôlé avec les sélecteurs de classe CSS suivants :
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
Propriétés CSS du contrôle vertical du volume
arrière-plan-couleur |
Couleur d'arrière-plan de la commande verticale du volume. |
width |
Largeur de la commande verticale du volume. |
hauteur |
Hauteur de la commande verticale du volume. |
Le bouton de volume vertical est contrôlé avec le sélecteur de classe CSS suivant :
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob
Propriétés CSS du bouton vertical de contrôle du volume
image d’arrière-plan |
Illustration du bouton de commande de volume vertical. |
arrière-plan-position |
Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés. Voir CSS Sprites . |
width |
Largeur du bouton vertical de commande du volume. |
hauteur |
Hauteur du bouton vertical de commande du volume. |
gauche |
Position horizontale du bouton vertical de commande du volume. |
L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Configuration d’un bouton de silence 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 lorsque vous sélectionnez ou non cette option.
.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);
}
Voici un exemple de la façon dont vous pouvez mettre en forme le curseur de volume dans la commande de volume mutable.
.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);
}
Vous trouverez ci-dessous 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é du lecteur de contenu :
"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.