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

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

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

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

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.