Volume mutable

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 .

REMARQUE

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.

Exemples

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.

Sur cette page