Il pulsante di riproduzione/pausa fa sì che il lettore video riproduca o metta in pausa il contenuto video quando un utente lo fa clic.
È possibile ridimensionare, applicare uno skin e posizionare il pulsante in base alla barra di controllo che lo contiene, tramite CSS.
Il seguente selettore di classe CSS controlla l’aspetto del pulsante:
.s7video360viewer .s7playpausebutton
top |
Posizione dal bordo superiore, inclusa la spaziatura. |
right |
Posizione dal bordo destro, compresa la spaziatura. |
sinistra |
Posizione dal bordo sinistro, inclusa la spaziatura. |
bottom |
Posizione dal bordo inferiore, inclusa la spaziatura. |
width |
Larghezza del pulsante. |
height |
Altezza del 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. Consulta Sprite CSS . |
Questo pulsante supporta sia i selettori di attributi state
, selected
che replay
, che possono essere utilizzati per applicare interfacce diverse a diversi stati del pulsante. In particolare, selected='true'
corrisponde allo stato “play” e selected='false'
corrisponde allo stato “pause”;
Il selettore di attributi replay='true'
viene impostato quando il video ha raggiunto la fine e la selezione del pulsante riavvia la riproduzione dall'inizio.
La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .
Esempio : per impostare un pulsante di riproduzione/pausa di 32 x 32 pixel. Posizionare sei pixel dal bordo superiore e sinistro della barra di controllo. Infine, visualizza un’immagine diversa per ciascuno dei quattro stati dei pulsanti selezionati o meno.
.s7video360viewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7video360viewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7video360viewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7video360viewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}