Volume variabile

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 .

NOTA

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.

Esempi

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.

In questa pagina