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 al video scrubber e modificarne l’altezza e la posizione verticale, mediante CSS.

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

.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob

Proprietà CSS dello scorrimento video

primi
Posizione dal bordo superiore, inclusa la spaziatura.
in basso
Posizione dal bordo inferiore, inclusa la spaziatura.
altezza
Altezza dello scorrimento video.
colore di sfondo
Colore dello scorrimento video.

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

.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed

Proprietà CSS del brano

altezza
Altezza del brano corrispondente.
colore di sfondo
Colore del brano corrispondente.

Il seguente selettore di classe CSS controlla la manopola:

.s7interactivevideoviewer .s7videoscrubber .s7knob

Proprietà CSS della manopola

primi
Offset manopola verticale.
larghezza
Larghezza manopola.
altezza
Altezza manopola.
immagine di sfondo
Grafica a manopola.
background-position

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

Vedere sprite CSS.

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

.s7interactivevideoviewer .s7videoscrubber .s7videotime

Proprietà CSS dell'indicatore del tempo riprodotto

famiglia di caratteri
Famiglia di font da utilizzare per il testo visualizzato nel tempo.
font-size
Dimensione font da utilizzare per il testo visualizzato nel tempo.
colore
Colore del carattere da utilizzare per il testo visualizzato nel tempo.
larghezza
Larghezza area bolle.
altezza
Altezza area bolle.
riempimento
Spaziatura interna area bolle.
immagine di sfondo
Illustrazione di bolle.
background-position

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

Vedere sprite CSS.

allinea testo
Allineamento del testo con l'area a bolle.

La descrizione comando dello scorrimento video può essere localizzata. Per ulteriori informazioni, vedere Localizzazione degli elementi dell'interfaccia utente.

Esempio - Per impostare un visualizzatore video con uno scorrimento video e con colori di traccia personalizzati alti dieci pixel. Posizionarlo a dieci pixel e a 35 pixel dai bordi superiore e sinistro della barra di controllo.

.s7interactivevideoviewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7interactivevideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}

Quando l'indicatore del capitolo video è abilitato con il parametro navigation, le posizioni dei capitoli vengono visualizzate come indicatori sopra la traccia di scorrimento video.

Il marcatore del capitolo video è controllato dal seguente selettore di classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7navigation

Proprietà CSS del marcatore capitolo video

larghezza
Larghezza marcatore capitolo video.
altezza
Altezza marcatore capitolo video.
immagine di sfondo
Illustrazione del marcatore del capitolo video.
background-position

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

Vedere sprite CSS.

NOTE
Questo pulsante supporta il selettore di attributi state, che è possibile utilizzare per applicare interfacce diverse a diversi stati di pulsante. In particolare, selected='default' corrisponde allo stato predefinito del marcatore del capitolo video e selected='over' viene utilizzato quando il marcatore del capitolo video viene attivato con un passaggio del mouse o un movimento di contatto.

Esempio - Per impostare un marcatore di capitolo video di 5 x 8 pixel e utilizzare un'immagine diversa per lo stato "predefinito" e "sopra".

.s7interactivevideoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}

La bolla dei capitoli video è posizionata sopra il marcatore dei capitoli video e mostra il titolo, l’ora di inizio e la descrizione di un determinato capitolo. È possibile controllare la larghezza massima della bolla e l'offset verticale rispetto alla traccia di scorrimento video. Il resto viene calcolato automaticamente dal componente.

La bolla dei capitoli video è controllata dal seguente selettore di classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter

Proprietà CSS del fumetto del capitolo video

larghezza max
Larghezza massima della bolla del capitolo video.
in basso
Offset verticale dalla traccia di scorrimento video.

Esempio - Per impostare una bolla di capitoli video larga 235 pixel e alta otto pixel dalla parte inferiore della traccia di scorrimento video.

.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}

La bolla dei capitoli video è composta da un’intestazione e da un contenuto opzionali. L’intestazione presenta l’ora di inizio del capitolo e il titolo del capitolo opzionali.

L’intestazione è controllata dal seguente selettore di classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

Proprietà CSS dell'intestazione del fumetto del capitolo video

altezza
Altezza intestazione bolla capitolo video.
riempimento
Spaziatura interna per il testo dell’intestazione della bolla del capitolo video.
colore di sfondo
Colore di sfondo intestazione bolla capitolo video.
altezza riga
Altezza riga testo intestazione capitolo video.

Esempio - Per impostare un'intestazione a bolla di capitolo video alta 22 pixel, con un'altezza di linea di 22 pixel, un margine orizzontale di 12 pixel e uno sfondo grigio.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}

L’ora di inizio del capitolo video è controllata dal seguente selettore di classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

Proprietà CSS dell'ora di inizio del capitolo video

colore
Colore testo.
font-weight
Spessore font.
font-size
Dimensione font.
famiglia di caratteri
Famiglia di caratteri.
riempimento a destra
Spaziatura tra l'ora di inizio e il titolo del capitolo.

Esempio - Per impostare l'ora di inizio del capitolo utilizzando il tipo di carattere Verdana a dieci pixel di colore grigio e con dieci pixel di spaziatura interna a destra.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime {
color: #dddddd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
padding-right: 10px;
}

Il titolo del capitolo video è controllato dal seguente selettore di classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

Proprietà CSS del titolo del capitolo video

colore
Colore testo titolo capitolo video.
font-weight
Spessore font titolo capitolo video.
font-size
Dimensione font titolo capitolo video.
famiglia di caratteri
Famiglia di font per il titolo del capitolo video.

Esempio - Per impostare un titolo di capitolo video che utilizza un font Verdana bianco, grassetto e a dieci pixel.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title {
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
}

La descrizione del capitolo video è controllata dal seguente selettore di classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

Proprietà CSS della descrizione del capitolo video

colore
Colore testo descrizione capitolo video.
colore di sfondo
Colore di sfondo della descrizione del capitolo video.
font-weight
Spessore font descrizione capitolo video.
font-size
Dimensione font descrizione capitolo video.
famiglia di caratteri
Famiglia di font per la descrizione del capitolo video.
altezza riga
Altezza riga descrizione capitolo video.
riempimento
Spaziatura interna descrizione capitolo video.

Esempio - Per impostare la descrizione del capitolo video utilizzando un carattere Verdana di colore grigio scuro da 11 pixel con uno sfondo grigio chiaro. Altezza delle linee di cinque pixel, spaziatura orizzontale di 12 pixel, spaziatura superiore di 12 pixel e spaziatura inferiore di nove pixel.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description {
color: #333333;
background-color: rgba(221, 221, 221, 0.9);
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 15px;
padding: 12px 12px 9px;
}

Il connettore a cuneo all’interno della parte inferiore della bolla del capitolo è controllato dal seguente selettore di classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

Proprietà CSS del connettore cuneo

colore bordo

Colore connettore cuneo.

Definito come <colore> trasparente in modo che venga definito solo il colore del bordo superiore e che i bordi rimanenti vengano lasciati trasparenti.

larghezza bordo

Larghezza connettore cuneo.

Definito come <larghezza> <larghezza> 0 in modo che la stessa larghezza sia definita solo per i bordi superiore e orizzontale e la larghezza del bordo inferiore sia 0 .

margine
Definisce solo un margine inferiore negativo. Deve avere lo stesso valore di border-width .

Esempio - Per impostare un connettore cuneo grigio da sei pixel:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8