Il controllo del volume mutabile viene inizialmente visualizzato come un pulsante che consente all'utente di disattivare o disattivare l'audio del lettore video.
Quando un utente passa il mouse sul pulsante, viene visualizzato un cursore che consente all'utente di impostare il volume. Il controllo del volume variabile può essere dimensionato, skin e posizionato, rispetto alla barra di controllo che lo contiene, tramite CSS.
L'aspetto dell'area del volume variabile viene controllato con il seguente selettore di classe CSS:
.s7videoviewer .s7mutablevolume
Proprietà CSS del volume mutabile
top |
Posizione dal bordo superiore, inclusa la spaziatura. |
right |
Posizione dal bordo destro, compresa la spaziatura. |
width |
Larghezza del controllo del volume mutabile. |
height |
Altezza del controllo del volume mutabile. |
colore di sfondo |
Colore del controllo del volume mutabile. |
L’aspetto del pulsante di disattivazione/disattivazione audio è controllato con il seguente selettore di classe CSS:
.s7videoviewer .s7mutablevolume .s7mutebutton
È possibile controllare l'immagine di sfondo per ogni stato del pulsante. Le dimensioni del pulsante vengono ereditate dalle dimensioni del controllo del volume.
Proprietà CSS dell’immagine pulsante
immagine di sfondo |
Immagine visualizzata per un determinato stato del pulsante. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Vedi Sprite CSS . |
Questo pulsante supporta entrambi state
e selected
selettori di attributi, che possono essere utilizzati per applicare interfacce diverse a diversi stati dei pulsanti. In particolare, selected='true'
corrisponde allo stato “disattivato” e selected='false'
corrisponde allo stato “unmuted”.
L'area della barra del volume verticale è controllata con il seguente selettore di classe CSS:
.s7videoviewer .s7mutablevolume .s7verticalvolume
Proprietà CSS dell'area della barra del volume verticale
colore di sfondo |
Colore di sfondo del volume verticale. |
larghezza |
Larghezza del volume verticale. |
altezza |
Altezza del volume verticale. |
La traccia all’interno del controllo del volume verticale viene controllata con i seguenti selettori di classe CSS:
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack
Proprietà CSS del controllo del volume verticale
colore di sfondo |
Colore di sfondo del controllo del volume verticale. |
larghezza |
Larghezza del controllo del volume verticale. |
altezza |
Altezza del controllo del volume verticale. |
La manopola del volume verticale viene controllata con il seguente selettore di classe CSS:
.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob
Proprietà CSS della manopola di controllo del volume verticale
immagine di sfondo |
Grafica a manopola di controllo del volume verticale. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Vedi Sprite CSS . |
larghezza |
Larghezza della manopola di controllo del volume verticale. |
altezza |
Altezza della manopola di controllo del volume verticale. |
sinistra |
Posizione orizzontale della manopola di controllo del volume verticale. |
La descrizione comando del pulsante può essere localizzata. Vedi Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Per impostare un pulsante muto di 32 x 32 pixel e posizionato 6 pixel dalla parte superiore e 38 pixel dal bordo destro della barra di controllo. Se selezionato o non selezionato, visualizza un’immagine diversa per ciascuno dei quattro stati del pulsante.
.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);
}
Di seguito è riportato un esempio di come personalizzare lo stile del cursore del volume all'interno del controllo del volume mutabile.
.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);
}
Di seguito è riportato un esempio di come personalizzare il lettore video in modo che l'audio sia disabilitato durante la riproduzione. Aggiungi il seguente codice al codice di incorporamento del visualizzatore:
"handlers":{
"initComplete":function() {
videoViewer.getComponent("mutableVolume").setPosition(0);
videoViewer.getComponent("mutableVolume").deactivate();
}
}
Nell'esempio di codice riportato sopra, il livello del volume è impostato su 0
sulla mutableVolume
componente. Quindi, lo stesso componente viene disattivato e non può essere utilizzato dall’utente finale.