Scorrimento video video-scrubber

Lo scorrimento video è il dispositivo di scorrimento orizzontale che consente all’utente di cercare dinamicamente una posizione temporale all’interno del video attualmente in riproduzione.

La "manopola" di scorrimento si sposta anche durante la riproduzione del video per indicare la posizione temporale corrente del video durante la riproduzione. Lo scorrimento video occupa sempre l'intera larghezza della barra di controllo. È possibile applicare lo skin allo scorrimento del video e modificarne l’altezza e la posizione verticale, utilizzando gli stili CSS.

L’aspetto generale dello scorrimento dei video è controllato dal seguente selettore di classe CSS:

.s7mixedmediaviewer .s7videoscrubber
.s7mixedmediaviewer .s7videoscrubber .s7videotime
.s7mixedmediaviewer .s7videoscrubber .s7knob

Proprietà CSS dello scorrimento video

top
Posizione dal bordo superiore, inclusa la spaziatura.
bottom
Posizione dal bordo inferiore, inclusa la spaziatura.
height
Altezza dello scorrimento video.
background-color
Colore dello scorrimento video.

I seguenti selettori di classi CSS tengono traccia degli indicatori di sfondo, riproduzione e caricamento:

.s7mixedmediaviewer .s7videoscrubber .s7track
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded
.s7mixedmediaviewer .s7videoscrubber .s7trackplayed

Proprietà CSS del brano

height
Altezza del brano corrispondente.
background-color
Colore del brano corrispondente.

Il seguente selettore di classe CSS controlla la manopola:

.s7mixedmediaviewer .s7videoscrubber .s7knob

Proprietà CSS della manopola

top
Offset manopola verticale.
width
Larghezza manopola.
height
Altezza manopola.
background-image
Grafica a manopola.
background-position

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

Consulta Spunti CSS.

Il seguente selettore di classe CSS controlla la bolla del tempo riprodotto:

.s7mixedmediaviewer .s7videoscrubber .s7videotime

Proprietà CSS dell’indicatore di riproduzione

font-family
Famiglia di font da utilizzare per il testo visualizzato nel tempo.
font-size
Dimensione font da utilizzare per il testo visualizzato nel tempo.
color
Colore del carattere da utilizzare per il testo visualizzato nel tempo.
width
Larghezza area bolle.
height
Altezza area bolle.
riempimento
Spaziatura interna area bolle.
background-image
Illustrazione di bolle.
background-position

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

Consulta Spunti CSS.

text-align
Allineamento del testo con l'area a bolle.

La descrizione comando dello scorrimento video può essere localizzata. Consulta Localizzazione degli elementi dell’interfaccia utente per ulteriori informazioni.

Esempio section-e8caea0a303c425a8a637c2a47c06355

Impostare un visualizzatore di file multimediali diversi con uno scorrimento video con colori di brano personalizzati alti 10 pixel e posizionati a 10 pixel e a 35 pixel dai bordi superiore e sinistro della barra di controllo.

.s7mixedmediaviewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7mixedmediaviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7mixedmediaviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8