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 :

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

.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

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 :

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

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 :

.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track 
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

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

.s7videoviewer .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 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.

Sur cette page