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

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

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

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

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

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.

Risorse Business.Adobe.com

Personalized Experiences Personalized Communications Document Generation Version History Dynamic Media Customer Experience Management