Volume variabile mutable-volume

Il controllo del volume mutabile viene inizialmente visualizzato come un pulsante che consente all'utente di disattivare o attivare l'audio del lettore video.

Quando un utente passa il mouse sul pulsante, viene visualizzato un cursore che consente di impostare il volume. Il controllo volume modificabile può essere ridimensionato, interpolato e posizionato in base alla barra di controllo che lo contiene tramite CSS.

L’aspetto dell’area del volume mutabile è controllato dal seguente selettore di classe CSS:

.s7videoviewer .s7mutablevolume

Proprietà CSS del volume modificabile

top
Posizione dal bordo superiore, inclusa la spaziatura.
destra
Posizione dal bordo destro, inclusa la spaziatura.
width
Larghezza del controllo volume modificabile.
height
Altezza del controllo volume modificabile.
background-color
Colore del controllo volume modificabile.

L’aspetto del pulsante di disattivazione audio/attivazione audio è controllato dal 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 volume.

Proprietà CSS dell’immagine del pulsante

background-image
Immagine visualizzata per un determinato stato del pulsante.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS.

NOTE
Questo pulsante supporta sia state e selected selettori di attributi, che possono essere utilizzati per applicare interfacce diverse a stati di pulsante diversi. In particolare: selected='true' corrisponde allo stato “disattivato” e selected='false' corrisponde allo stato “unmuted”.

L’area verticale della barra del volume è controllata con il seguente selettore di classe CSS:

.s7videoviewer .s7mutablevolume .s7verticalvolume

Proprietà CSS dell'area verticale della barra del volume

background-color
Colore di sfondo del volume verticale.
width
Larghezza del volume verticale.
height
Altezza del volume verticale.

Il tracciamento all'interno del controllo del volume verticale è controllato con i seguenti selettori di classe CSS:

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

Proprietà CSS del controllo volume verticale

background-color
Colore di sfondo del controllo volume verticale.
width
Larghezza del controllo volume verticale.
height
Altezza del controllo volume verticale.

La manopola del volume verticale è controllata con il seguente selettore di classe CSS:

.s7videoviewer .s7mutablevolume .s7verticalvolume .s7knob

Proprietà CSS della manopola di controllo del volume verticale

background-image
Illustrazione della manopola di controllo del volume verticale.
background-position

Posizionate all'interno dello sprite del disegno, se vengono utilizzati gli sprite CSS.

Consulta Spunti CSS.

width
Larghezza della manopola di controllo del volume verticale.
height
Altezza della manopola di controllo del volume verticale.
left
Posizione orizzontale della manopola di controllo del volume verticale.

La descrizione comando del pulsante può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempi section-e8caea0a303c425a8a637c2a47c06355

Per impostare un pulsante di disattivazione audio di 32 x 32 pixel posizionato a 6 pixel dall'alto e a 38 pixel dal bordo destro della barra di controllo. Visualizzare un'immagine diversa per ciascuno dei quattro diversi stati dei pulsanti, se selezionato o meno.

.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 applicare uno stile al cursore del volume all'interno del controllo volume modificabile.

.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 venga disattivato 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 il mutableVolume componente. Quindi, lo stesso componente viene disattivato e non può essere utilizzato dall’utente finale.

recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8