Il pulsante di riproduzione/pausa consente al lettore video di riprodurre o mettere in pausa il contenuto video quando un utente fa clic su di esso.
È possibile ridimensionare, applicare lo skin e posizionare il pulsante in base al CSS rispetto alla barra di controllo che lo contiene.
Il seguente selettore di classe CSS controlla l’aspetto del pulsante:
.s7videoviewer .s7playpausebutton
top |
Posizione dal bordo superiore, inclusa la spaziatura. |
destra |
Posizione dal bordo destro, inclusa la spaziatura. |
left |
Posizione dal bordo sinistro, inclusa la spaziatura. |
bottom |
Posizione dal bordo inferiore, inclusa la spaziatura. |
width |
Larghezza del pulsante. |
height |
Altezza 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 . |
Questo pulsante supporta sia state
, selected
, e replay
selettori di attributi, che possono essere utilizzati per applicare interfacce diverse a stati di pulsante diversi. In particolare: selected='true'
corrisponde allo stato “play” e selected='false'
corrisponde allo stato “pausa”;
Selettore di attributi replay='true'
è 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. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.
Per impostare un pulsante di riproduzione/pausa di 32 x 32 pixel posizionato a sei pixel dal bordo superiore e sinistro della barra di controllo. Infine, visualizza un'immagine diversa per ciascuno dei quattro diversi stati del pulsante, se selezionato o meno.
.s7videoviewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7videoviewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7videoviewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7videoviewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}